Tag Archive > google

Using Google Fonts Locally

» 03 February 2011 » In Guides, Web Design » 15 Comments

Google Fonts, or more popularly known as Google Web Fonts, provides a great collection of open source licensed (can be used commercially and non-commercially) true-type fonts. My favorite is Droid Sans, the font I’m currently using now sitewide.

Because I love Droid Sans, I want to use it everywhere. Even in my school projects. I just finished a project (that is due tomorrow) that demonstrates HTML frames. And I wan’t (of course) to use Droid Sans as the main font for the web page. And if I used the font as I regularly do:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular&amp;subset=latin' rel='stylesheet'> 

The font won’t be viewable offline. So the solution for this, is to download the font and use the CSS Google recommends. Take a look here.

@media screen {
@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');
}
}

But how do we download the font? That’s easy look at the url('...'):

src: local('Droid Sans'), local('DroidSans'), url('http://themes.googleusercontent.com/font?kit=s-BiyweUPV0v-yRb-cjciC3USBnSvpkopQaUR-2r7iU') format('truetype');

Just enter that URL to your browser, and viola!

Now that we got our font, we use the CSS, and we modify it a little bit:

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

So this works for the latest stable versions of Chrome, Firefox, Opera, Safari, and.. Wait.. It’s not working in IE8. This is because IE lte 8 only accepts EOT type fonts. So how do we fix this? I’m not an IE user, but a big part of the Internet population uses IE, so we do not have a choice.

Good news is, you can convert TTF fonts to EOT. After that, save the file on the same directory where our TTF font is, and add it in the CSS.

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: url('path/to/DroidSans.eot');
  src: local('Droid Sans'), local('DroidSans'), url('path/to/DroidSans.ttf') format('truetype');
}

Now, you have to remember that you have to place this on the top of your CSS document. Then you can just use this as a regular font in CSS:

body {
	font-family: 'Droid Sans', Arial, sans;
	color: #666;
}

Make sure, that the path to the font is always relevant to the CSS file. And that’s all for now. :)

Continue reading...

Tags: , , , , ,

Google Docs: Best Free File Server

» 03 November 2010 » In Guides, Internet » 2 Comments

It’s very hard to find a reliable, fast, and free file hosting service today. Most have waiting download time, and even requires a premium or pro account to achieve satisfaction with the service. But then, there’s Google Docs. It’s not actually a file hosting service, but it can be one.

Google Docs is a free, Web-based word processor, spreadsheet, presentation, form, and data storage service offered by Google. It allows users to create and edit documents online while collaborating in real-time with other users. Google Docs combines the features of Writely and Spreadsheets with a presentation program incorporating technology designed by Tonic Systems.

Yes, just like the very basic version of Microsoft Office, only its online. For now, the file size upload limit is 1GB and the storage capacity is also 1GB, but what could you ask for more? If you need to backup or share important documents or files privately, then this is for you. I myself is using this service to share large image files. With this, you can take advantage of the reliability, security and speed.

Google Docs allows uploads of all extensions. And you have the ability to change the privacy settings of a particular file. You can share it publicly, exclusively, and privately.

  • Public on the Web - Anyone on the Internet can find and access. No sign-in required.
  • Anyone with the link - Anyone who has the link can access. No sign-in required.
  • Private - Only people explicitly granted permission can access. Sign-in required.

There are so many options to choose from, especially when you’re on a Google Apps domain account. And don’t forget, all of these is FREE! So spread the word.

Continue reading...

Tags: , , , , ,

Browse Safely: HTTPS All the Way

» 09 August 2010 » In Guides, Internet » No Comments

Whenever we browse the web, we usually start with Google, searching stuff, then to our favorite social networking websites like Facebook and Twitter. But what we do not know is, with our default browsing preferences, our personal input is unsecured.

Continue reading...

Tags: , , , , , , ,