Embed Custom Fonts Into Your Website
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.
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></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.