Embed Custom Fonts Into Your Website For Free Using The Google Font Directory

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.

And now go on and make the web a more beautiful place ;-)

About the author

Nils Kattau is Founder and CEO of whatanicepost.com. He is living in Berlin, Germany with his girlfriend and two cats and has more than 6 years of experience in professional webdesign. Click here to view more articles from Nils

3 Comments

  1. Lan Stadnik says:

    I usually get bored easily and close the tab but i honestly enjoyed what i read. Cheers !

    Reply
  2. Rob says:

    Is this similar to the css3 font-face attribute? Is it well supported across multiple browsers? Great post, looking forward to hearing back

    Reply

Leave a Comment

Powered by WordPress