The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Basics of Google Font API

Last updated on:

Link to CSS files

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


   <link rel="stylesheet" type="text/css" href=",bolditalic|Inconsolata:italic|Droid+Sans">
Idea: You can avoid an extra network request by opening that stylesheet and copy-and-pasting the @font-face stuff into your main stylesheet. But beware: Google does some User Agent sniffing stuff to sometimes serve different things to different devices as needed. You won't benefit from that if done this way.


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; 


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=""></script>
<script type="text/javascript">
    google: {
      families: ['Cantarell']
<style type="text/css">
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 { 
    visibility: visible; font-family: 'Cantarell'; 

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


  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. Pragati
    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. daniel due
    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 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. nurdin nurung
    Permalink to comment#

    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. Jeff Daze
    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 ) 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. kurniawan
    Permalink to comment#

    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. Jesin
    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. iGyan
    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:,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(‘,bolditalic|Inconsolata:italic|Droid+Sans’);

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

  15. Aaron
    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. Steve V
    Permalink to comment#

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

  17. Jim Sells
    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. Basit
    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. Toma
    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.

    • Sam
      Permalink to comment#

      Webfontloader has an event for that so you can make the text visible again. Take a look at the ‘fontinactive’ and ‘inactive’ events. You can even set your own timeout.

      “Since the Internet is not 100% reliable, it’s possible that a font will fail to load. The fontinactive event will be triggered after 5 seconds if the font fails to render. If at least one font succesfully renders, the active event will be triggered, else the inactive event will be triggered.”

  23. Dinora

    Is it OK to write it like this?

    <!DOCTYPE html>
    <link rel="stylesheet" type="text/css" href=",700,700italic,600,600italic/subset=latin,latin-ext">
    p.ex4 {
        font:18px Open Sans, sans-serif;

    How do I do it correctly=

  24. attilio

    Hello I found through my website PageSpeed this:
    How do I fix this?
    Can you help me? I’m not good with html
    Thanks for the help Attilio

  25. Raul

    Google developer PageSpeed Insights recommend eliminate render-blocking JavaScript and CSS in above-the-fold content, It’s a good practice load Google fonts in footer instead of header?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed