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>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.
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.
This is still new so kinda complicated for newer coders. But it will develop more and soon be very easy.
I made a TextMate Bundle for the google font api, so you can just click a font in the menu and have it imported without having to look up the url online http://github.com/adrusi/Google-Font-Directory-TextMate-Bundle
can you please update the github link .
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.
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?
We can also Import the google API font via:
@import url(http://fonts.googleapis.com/css?family=Lobster);
daniel due-
a little late perhaps, but fontSwitcher (JavaScript) allows you to use multiple Google fonts, and also to add new ones or swap them out on the fly:
http://tech-in-check.blogspot.com/p/fontswitcher-google-font.html
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.
thanks for tip
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.
Every time you see “in the tag” you should read “in the html tag.” – I just read the posting tips (╯°□°）╯︵ ┻━┻
where is I can find full list of font can support?
http://www.google.com/webfonts
Thank you Shabir Gilkar for your comment. That is the only method that works for me with Internet Explorer.
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 https://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!
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.
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.
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.
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.
this is not working in i9
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 ?
Tinfoil hat owners mainly it seems!
Wonderful Guide,
Any Beginner can learn how to use the awesome fonts from Google Fonts, There are so many cool fonts for website designing.
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! :)
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…
This is great, thanks for posting. It will very useful for new sites that I will be building.
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
Thanks, mate! Finally solved my PageSpeed Insights error!
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!
“Sans”, shorthand for “sans-serif”, is not the best combination with: “serif”, as in your example. (Sans = without, serif = “hooks”).
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.
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.
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.
https://github.com/typekit/webfontloader
“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.”
Is it OK to write it like this?
How do I do it correctly=
Hello I found through my website PageSpeed this:
http://fonts.googleapis.com/css?family=Open+Sans%3A300%2C300italic%2C400%2C400italic%2C600%2C600italic%2C700%2C700italic&subset=latin%2Ccyrillic%2Cgreek&ver=4.2.2
How do I fix this?
Can you help me? I’m not good with html
Thanks for the help Attilio
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?
The “|” causes http://validator.w3.org/ to fail the page. Use %7C instead.