Adding fonts to your Website with Google Web Fonts

People often wonder where I get my fonts. You could play around with the small number of universally web-safe fonts (that is, those that are built in to pretty much every browser.), or you could import them from a web service. For this, I use Google Web Fonts. It’s pretty easy once you get the hang of it!

First, go to

Google Web Fonts

The Web Fonts home page.

You can select fonts by whatever attribute you’re looking for in the “Filters” dropdown and by the other attributes directly below it, but for the purposes of this tutorial, let’s go with the first font, “Arbutus Slab”.  Click “Add to Collection” and then “use” on the bottom menu that will pop up:

The font menu pop up.

The font usage menu.

The gauge that’s going to show up represents how long it’ll take to load your website with all of your included fonts (For the purposes of this tutorial, it’s irrelevant, but if you add more to your collection, this should concern you.) To deal with the importing, let’s go down to the “Add this code to your website:” section and click “@import”.

the at import screen.

Our CSS import code.

The reason behind using this code over the first one is that we can add this to an external stylesheet and have it work across all of our pages. So, head into Dreamweaver or whatever HTML editor you use and paste this code into your CSS file like so:

CSS import

Our CSS import.

Now you’re able to use these fonts on any page that are linked to this stylesheet! To use them, just add a “font-family” tag followed by the name of the font, just as I used in the body declaration.

–Ryan Craig

~ by ryanwcraig on October 1, 2012.

%d bloggers like this: