SteveHinesley.com

My Personal Technical Resource

How to use custom fonts in your HTML with Google Web Fonts

Google has made adding custom fonts to your web pages very simple. You no longer need to find a public domain font, download it, convert it, and then upload it to your site. Plus, it only takes a simple edit to change the font.

First go to Google Web Fonts and choose the font(s) you want to use on your site.

http://www.google.com/webfonts

Second, once you choose your font, click on “Quick-use” and choose any styles and/or character sets, if applicable.

Next you just copy-and-paste the line from the blue box to the section of your HTML, for example:

<link href='http://fonts.googleapis.com/css?family=Russo+One' rel='stylesheet' type='text/css'></link>

Finally you integrate the font into your CSS where you want to use it, for example:

html {font-family:'Russo One',sans-serif;} /* Use it everywhere */

or

h1 {font-family:'Russo One',sans-serif;} /* Use the Russo One font for the H1 tag */

Download How to use custom fonts in your HTML with Google Web Fonts as PDF