Grow your CSS skills. Land your dream job.

Last updated on:

Basics of Google Font API

Link to CSS files

You essentially hotlink directly to CSS files on Google.com. Through URL parameters, you specificity which fonts you want, and what variations of those fonts.

<head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans">
</head>
Hot tip: Just open that CSS file in your browser, copy and paste the contents, and put in your own CSS file. That way it's not an extra HTTP request.

CSS

In your CSS you can then specify these new fonts by name on any element you wish to use them.

body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }

FontLoader

You can use the FontLoader JavaScript instead of linking to the CSS. It has advantages, like controlling the Flash of Unstyled Text (FOUT), and also disadvantages, like the fact that the fonts won't load for users with JavaScript off.

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script type="text/javascript">
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 
  }
</style>

Those class names, e.g .wf-loading get applied to the <html> element. So notice when the fonts are "loading", you can use that class name to hide the text. Then when they are shown, make them visible again. That is how FOUT is controlled.

Reference URL

Comments

  1. Werner
    Permalink to comment#

    This is still new so kinda complicated for newer coders. But it will develop more and soon be very easy.

  2. Permalink to comment#

    This is nice. but the problem is I could not found much fonts here. I would like to add regional fonts and I couln’t get it on google api.

  3. Permalink to comment#

    This is a welcomming feature.. a js for google font api..

    I already have it implemented in my joomla template. So users can choose between 11 google fonts. But I want, to be able to get more than one font, and set it on headlines and text.. Got any script for that? :)

    Also do i just use a php variable to change Cantarell?

  4. Joe
    Permalink to comment#

    One thing to keep in mind is if you’re viewing the page locally Google Web Fonts will not load in IE or Firefox – only Chrome. You have to preview your page from the server.

  5. Ben
    Permalink to comment#

    Remember that .wf-loading will not be added to your <html> tag until the loader has been initialized, which means that you can still get FOUTs. I get around this by hardcoding .wf-loading in the <html> tag and using .no-js.wf-loading as a fallback for browsers with JS turned off.

    • Ben
      Permalink to comment#

      Every time you see “in the tag” you should read “in the html tag.” – I just read the posting tips (╯°□°)╯︵ ┻━┻

  6. where is I can find full list of font can support?

  7. Jon Ezrin
    Permalink to comment#

    Thank you Shabir Gilkar for your comment. That is the only method that works for me with Internet Explorer.

  8. Permalink to comment#

    As a note, if you view the CSS in your browser (as per your hot tip) be sure to view it in multiple browsers (most notably Internet Explorer and Firefox or Chrome) as Google uses some server-side technology to serve particular CSS to different browsers.

    For Chrome, Opera, and Firefox you get references to only the woff versions of the font, while Internet Explorer gets eot references with a cascade to the woff version.

    Ultimately the woff version should work everywhere, but if you want the most compatible CSS (as per http://css-tricks.com/snippets/css/using-font-face/ ) check out the eot version via Internet Explorer and use the CSS you feel will work the best for you!

    • Cole Dabner
      Permalink to comment#

      Or just open Chrome Dev Tools and override the User Agent (settings cog in the bottom left -> Overrides -> User Agent).

      Select IE and you’ll get the full CSS.

    • Neil Monroe
      Permalink to comment#

      To elaborate on Cole’s comment, you will get EOT and WOFF formats using the IE user-agent. Android devices may need the TTF of the font, which is what is served when using that user-agent override. Also, note that Google Fonts will serve up different versions of the WOFF fonts depending on the device (see what iOS user-agents get back). So, if this is important, then using the tag may still be the better option.

  9. It very nice thing you mention the API some of the font is great but really i prefer having the font on site when it still web development. but if the website is online having google cdn font is much better. Nice article by the way.

  10. Doug Melvin
    Permalink to comment#

    If you paste the URL in your browser you are only served fonts for your browser.
    You will not get all of the fonts for all the browsers that you wish to support.
    It’s not an altogether bad idea, but you will want to repeat the process in each of the browsers that you wish to support.

  11. Sunny
    Permalink to comment#

    this is not working in i9

  12. Permalink to comment#

    I always prefer the Javascript method because the code can be inserted at the footer of the page to reduce the impact it has on page load time.

    BTW who has javascript turned off these days ?

  13. Permalink to comment#

    Wonderful Guide,
    Any Beginner can learn how to use the awesome fonts from Google Fonts, There are so many cool fonts for website designing.

  14. Luis
    Permalink to comment#

    To add on the discussion for the “hot tip” section.

    In this case for example we are using:

    http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

    If you paste this link in chrome, firefox, or IE you will receive different rules depending on your browser type and version as it has been mention.

    I have found that easiest way to call Google Web Fonts is on your .css file is with an import statement on the top of your file.

    With our current example will have something like this:

    @import url(‘http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans’);

    Besides being a simple solution it is also elegant! :)

  15. Permalink to comment#

    Has anyone ever had a problem where google Chrome browser renders fonts as italics? I have a weird bug where in firefox and IE, everything is fine with them, but google chrome is rendering some of the fonts as italics when italic isn’t even set?

    Just wondering…

  16. Permalink to comment#

    This is great, thanks for posting. It will very useful for new sites that I will be building.

  17. Permalink to comment#

    As part of my site I ask visitors to pick out a Google Font and a color for it. This is to go on to a Book Cover. Is there a way to have a list of Google fonts shown (drop-down?) that the visitor could scroll through. Preferably with the name of the font shown in the font they have chosen. This is going into a WordPress site. Any suggestions or ideas are welcome. Thank you

  18. Permalink to comment#

    Thanks, mate! Finally solved my PageSpeed Insights error!

  19. Becky Bertuzzi
    Permalink to comment#

    What’s the difference between this piece of code and the font codes you build in your css file? I’m a noob to web design. Thanks!

  20. Permalink to comment#

    { font-family: ‘Tangerine’, ‘Inconsolata’, ‘Droid Sans’, serif; font-size: 48px; }

    “Sans”, shorthand for “sans-serif”, is not the best combination with: “serif”, as in your example. (Sans = without, serif = “hooks”).

  21. Serosis
    Permalink to comment#

    Another caveat of the fontloader script is that it takes a few seconds for the font to load.

    So if you have a header on your site that uses one of those fonts, during every page load you see the fallback before the font you placed.

  22. Joey
    Permalink to comment#

    This is a great approach although i do not agree with hiding the element on loading. What if the users connection gets cut off before it loads? The user will think the website is broken or something. I would rather give it a web friendly font in it’s loading state then my custom font once loaded. It might flash but i think it is better than showing nothing. Just a thought.

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".