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.
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
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);
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.
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 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!
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.