I’m sure most of you would have heard about the Google Font Directory. Google hosts a collection of web fonts that can be used by you in your site or blog. They operate on open source licensing and are not necessary to be downloaded before use!
How does it work?
All you would have to do is select the font from the list and hit the tab “Get the code”. You are now given an HTML <link> tag that you can include within the <head> tag.
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
You can reference to it as any other normal font in your styling. Something like
p {font-family: ‘Inconsolata’}
It removes the hassle of making your font available as .ttf and to make users download it, if necessary. The ease of changing the font is the most useful power of these web fonts.
And Font Preview?
Google had gone one step further to help the Web developers to frame the CSS with these fonts in the way that they want to. Hit http://code.google.com/webfonts/preview and take a note at their chic interface of font formatting. You can, here, select the font, size, and other formatting details. You can observe the CSS code beneath the display being updated for your selection. All you have to do, then, is just copy paste this code on to your CSS for the desired element. They also include the link that you need to provide in your <head> tag.
No comments:
Post a Comment