Using various fonts and embedding fonts on a website has always been a rather cumbersome task. There are a variety of ways to do this including the CSS3 property @font-face and Cufon but now there is an even easier way to do this. Google has released their font directory which allows you to embed fonts easily on the web. The Google font directory allows you to browse the fonts available with this method, and for all you designers out there Google has a package with all of the fonts for you to download to use in Photoshop. You can get the the package here to –> embed fonts on the web!
Download the Google fonts package here
With the Google font API you will only need one simple line of CSS in your page and the fonts will function as far back as Internet Explorer 6. For example the retro ‘Lobster’ font can be easily included in your site with the following method.
Firt place this line of code in the header of your document:
<link href=’http://fonts.googleapis.com/css?family=Lobster‘ rel=’stylesheet’ type=’text/css’>
Then all you need to do is call the font family in your CSS like so:
h1 { font-family: ‘Lobster‘, arial, serif; }
That’s it, all of the available fonts are listed for you at the Google font directory full instructions on how to embed fonts on the web can be found here. and you can download the TrueType embeddable font files here to use in your Photoshop Design. Hope you find this useful in your next professional web design project.
24th May 2010
Meredith Lesly
→ #
Unfortunately, some of the fonts don’t play well with Font Agent Pro on the Mac. I’ll be trying to use the fonts on a WordPress site later, but I wish they’d fix whatever is wrong with the fonts for us folks who do graphic design.
26th May 2010
admin
→ #
What is happening with the fonts? I use them all with out a problem on SuitCase Fusion
28th May 2010
Fawad Hassan
→ #
Very nice step done Google
thanks for sharing!
6th August 2010
admin
→ #
Originally i had packaged all of the fonts myself, but Google now is hosting the font package on Google Code. The link has been updated to direct to Google.
3rd April 2011
George
→ #
i want to embed Marathi, Oriya Tamil, Telugu fonts and I can’t find the correct fonts to use.
any advice?
5th April 2011
admin
→ #
@George –> Give Cufon a try :: http://cufon.shoqolate.com/generate/