Using embedded custom fonts in your website is a great way to give it a special look without the lack of search engine optimization you get when using images instead of “real” text. With the new Google Font Directory, you can do just that easy as 1-2-3.
In this article, I will tell you how to embed fonts from the Font Directory.
1. Browse the available fonts to find the perfect look
Go to http://code.google.com/webfonts and start searching. You can sort all available fonts by alphabet, popularity and number of variants. Different variants would be something like bold, italic and so on.
In addition, you are able to filter all fonts by serif, sans-serif, display and handwriting.
2. Found a font? Click it.
So you found your favortite font? Great. Click it.
There are 4 different tabs:
Specimen: Showing the all available font variants for this font in some example texts.
Character set: Showing every single character of the font. Like AaBbCc123!Ӥ.
Info: Providing some general information and statistics about the font and it’s foundry.
Get the Code: We’ll get to this now:
3. Finally: Embedding the font into your website
Don’t be afraid, it is really simple.
Just click the “Get the code”-tab on the font’s page and follow the given instructions.
1. Copy and paste the provided short code into the <head> section of your website. For example:
<head>
<link href='http://fonts.googleapis.com/css?family=TheFontYouChose' rel='stylesheet' type='text/css'>
</head>
2. Use the font family in your CSS file(s). For example:
h1 { font-family: 'TheFontYouChose', arial, serif; }
h2 { font-family: 'TheFontYouChose', "times new roman", times, sans-serif; }
p { font-family: 'TheFontYouChose', helvetica, serif; }
That’s it.
I’ll answer any questions in the comments.
I usually get bored easily and close the tab but i honestly enjoyed what i read. Cheers !
Is this similar to the css3 font-face attribute? Is it well supported across multiple browsers? Great post, looking forward to hearing back
Hi Rob,
it is similar to the CSS3 @font-face attribute. It was implemented with CSS2 (or 2.1, not sure) and hasn’t changed with CSS3. It is not THAT well supported across multiple browsers, but of course there are ways to make it work in any browser. You can read a tutorial here: http://randsco.com/index.php/2009/07/04/p680
Nils