Code Snippet
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>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.