Add Fonts to Your Site Using Google Web Fonts

Gone are the days of font shortage. Thanks to Google, they have introduced their Google Web Fonts web service which makes working with typography so much easier for web designers and developers.

ScreenHunter 1335 Jan. 10 17.53 Add Fonts to Your Site Using Google Web Fonts

So how can you add these fonts to your own site? Here’s what I learned from a tutorial created by Basic Use. The steps are very simple to follow.

Step 1.
Go to the Google Web Fonts directory and select the font you want to use.
Step 2.
After selecting the font you want, get the code. Search for something like this

<link href='//fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css' >

Step 3.
But you need to add “/” to the end of tag so there would be no validation errors in the HTML. It sshould look like this:

<link href='//fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css' />

Step 4:
Copy and paste the code above and put it after tag <head> :

<head>

<link href='//fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css'/>

...

<!-- other HTML code -->

...

Step 5:

Add CSS code to your page.

You can also use this font in CSS, just set the property “font-family”.
Sample below if you want the font to apply in all headers of first level:

h1

{

font-family: 'Eater', cursive;

}

Hope this featured tutorial helps.

Incoming search terms for the article:

Comments
Trackbacks

2 Comments

Fat loss programs to get in Shape

02.24.2013

Hmm is anyone else experiencing problems with the images on
this blog loading? I’m trying to figure out if its a problem on my end or if it’s the blog.
Any feed-back would be greatly appreciated.
canada web design

03.03.2013

Everything is very open with a really clear description of the issues.
It was truly informative. Your website is extremely helpful.

Thank you for sharing!

There are no trackbacks to display at this time.