How to use Google Font Directory for webfonts

Post 138 of 262
April 27, 2011Andreas Viklund11 comments

I have previously written about using custom fonts through @font-face, and the difference it makes for the visual appearance of a website. Today I want to recommend a large directory of hosted fonts that you can include in your designs easily, without having to deal with the actual font files. Google has launched a site called Google Font Directory where the fonts are hosted, and possible to use by embedding a few lines of code in your sites. To get started, all you need to do is to follow a few simple steps.

Step 1: Selecting a font to use


The first thing to do is to go to the font directory and find a font that you would want to use. Keep readability in mind, not all fonts are suitable for all situations. For example, I would want to use the Swanky and Moo Moo font for a specific h2 header, so I go to the font directory and click the font. That takes me to this page:

Step 2: Inserting the font code

When I click the “Use this font” tab I am taken to a page describing how to include the font on my website. The instructions are simple and easy to follow. First of all, I need to place a line of code in the <head> section of the HTML of my site. It is a link to a stylesheet that defines the location of the font, as hosted on the Google servers:

<link href='https://fonts.googleapis.com/css?family=Swanky+and+Moo+Moo'
rel='stylesheet' type='text/css'>

Step 3: Use the font in the CSS

Once the CSS is loaded, the selected font can be used just like any common websafe font, in the stylesheet. To use it with my <h2> tags, I define it using a standard CSS declaration:

h2 {font-family: 'Swanky and Moo Moo', serif;}

This will result in all h2 headers being rendered with the pretty Swanky and Moo Moo font. There are of course more options, possibilities to load multiple fonts and an API that allows more advanced operations. But in order to break free from the classic websafe fonts and start exploring the concept of @font-face, this is actually a simple first step. Want to learn more? Read the official documentation.

Have you used Google Font Directory on your site? Post your story in a comment and show off your work, it would be interesting to see more examples of how this excellent tool is used out there.

, , ,

This article was written by Andreas Viklund

Web designer, writer and the creative engine behind this website. Author of most of the free website templates, along with some of the WordPress themes.

11 comments:

Facundo GonzálezApril 30, 2011 at 20:35Reply

Es exactamente lo que estaba buscando, ya que las fuentes populares ya aburren un poco. El problema es que necesito una fuente que sea totalmente compatible con el español, ya que hay símbolos que no contienen. Creo que con el sueco sucede lo mismo.

Pero bueno, espero que pronto liberen fuentes en español, compatibles al 100%.

Un saludo desde Argentina.
rezaMay 19, 2011 at 21:15Reply

plz write about bbpress

how to use and install

tnks
pawelJuly 4, 2011 at 13:10Reply

wow, that’s fantastic news, but anyway I need to make step to the HTML5 with all its goods.
Can I incorporate additional style fonts with XTHML transitional???
Cheers
Silviya HoweJuly 27, 2011 at 01:29Reply

Thank yu very much for this article. Will use for h1, very good idea!
mohamedAugust 5, 2011 at 00:40Reply

hi ,
could you please help me find good design software
i use forntpage and it’s sucks
lampeaceAugust 19, 2011 at 11:20Reply

its great trick
Frank Skibby JensenAugust 20, 2011 at 15:47Reply

Your post “How to use Google Font Directory for webfonts” is an easy and quick improvement of webdesign and text-formatting for webdesigner’s .

Mr. Andreas Viklund: You are a Guru :-)

Thanks for your nice work and sharing it, and your knowledge a’round.

From Frank – Denmark
MrFlicksSeptember 26, 2011 at 02:39Reply

Handy to know Font things there andreas

On another topic

How does a person contact you?
Andreas ViklundSeptember 26, 2011 at 03:01Reply

Thanks!

You can contact me through my contact page as well as through my Facebook page, through Twitter or Google+. If you have a question which other designers and template users may be able to help you with, you can also use the discussion forum. The links can be found in the navigation and at the top of the sidebar of this site.
GaryOctober 27, 2011 at 22:24Reply

This looks promising. There are some problems. I use Dreamweaver CS5, and the various web page preview options I have available within the program are inconsistent in displaying the Google web fonts. I have to actually upload and view the live page online to see how the fonts will be displayed. I do not have the latest versions of all the browsers I will mention, but I do have recent versions. Firefox, Chrome, and Safari seem to display the Google fonts accurately. Explorer displays the fonts, but not the added drop shadows. Opera displayed the drop shadow, but not the correct font. It is always difficult to embrace something new when it behaves inconsistently.
RichardApril 30, 2012 at 14:29Reply

I use Lubith in order to customize the tyography of my WP themes – I used Google fonts before but I switched to this theme generator for several reasons: I can make quick adjustments to fonts directly in the theme editor and see how they fit in the overall layout, it has over 400 web-safe fonts – you don’t have to worry about browsers anymore, additional scripts, font editing options that are not provided by WP plugins: word or letter spacing, line height, drop shadow ( + color, blur radius, opacity, position) etc.

Menu ✖