Home / Articles / Web / Tools / Easy way to add fonts to your site using google fonts

Easy way to add fonts to your site using google fonts

Easy way to add fonts to your site using google fonts
Easy way to add fonts to your site using google fonts
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (16 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

For long time site developers suffered because they could only use few fonts on their resources. But, now the Google launched a new web service Google Web Fonts. This service gives you a possibility to use a different fonts from Google on your site. The using of fonts don't have any restrictions.

Here is a short description how you can do it in few steps:

Choose a font

To do this, go to a font directory of Google http://www.google.com/webfonts and choose one which you like.

Choose Google font

Get a code of chosen font

In this example will be used "Eater" font. To get a code of this font, you need to find something like this in the opened page:

Get code Google font

Then you need to add "/" to the end of tag, to avoid validation errors in HTML. So it should look:

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

Copy the code above and put it after tag <head> like this:

  <link href='http://fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css'/>
  <!-- other HTML code -->

Adding CSS code to your page

Now you can use this font in CSS by setting property font-family. For example, if you want to apply this font to all headers of first level, you have to add the following CSS style:

h1 {
  font-family: 'Eater', cursive;


Read also

Font size in HTML

Font size in HTML

Details about "float" property

Details about "float" property

Discussion (total 2 comments)

February 04, 2017 at 11:49 pm
thanks benefit of this significant revealing website, finance up the massive jobless check out this <a href=http://onlinecasinos-x.com>casino</a> offers
February 06, 2017 at 07:49 pm
thanks due to the fact that this great informative website, living up the great work check out this <a href=http://onlinecasinos-x.com>online casinos</a> offers

Post comment


Quick navigation

General navigation