Christian Heilmann

Controlling custom fonts with the Google WebFonts API

Monday, August 9th, 2010 at 5:40 pm

One thing Google released at the last I/O conference was hosting for custom fonts to use in web sites for browsers that support that feature. So instead of streaming the fonts from your own server you can just point to Google’s farm and be done with it.

Fonts hosted by Google

Google hosts a few fonts for you and all you need to do is embed them.

Google font directory

They also released a font preview tool that allows you to tailor the font you want to your needs:

Google Font previewer tool

Hand-written blockquotes

One of the fonts is a scribbly little handwriting font called Reenie Beanie (I’ve used it for the sticky notes in my collection of hacks). Using this font you can create for example some sweet looking blockquotes:

blockquotes in hand written font

All you need to do is to include the font as a CSS link:


rel=”stylesheet” type=”text/css”>

And then you style your blockquote. As the font is rather small you need to bump up its size a bit:

blockquote{
font-family: ‘Reenie Beanie’, sans-serif;
font-size:160%;
background:#eee;
color:#666;
margin:1em 0;
padding:.5em;
}

And this is where it gets problematic. If for any reason the font cannot be loaded or the browser doesn’t support custom fonts, the experience is less pretty:

When the font doesn't load you have huge blockquotes

Which is a big problem of any pure CSS solutions – you hope things work but you can’t test for it (media queries being the exception here). However, there is another way to use the Google fonts.

Test, don’t hope

Instead of using the direct CSS links you can use the JavaScript Webfont loader which creates the style links with JavaScript and gives you a handle on what was loaded and not (Bonus: the loader is on GitHub).

Instead of the CSS link simply add the following script:


The loader now adds classes to the HTML element of the document to tell you when the font is loaded and when it is available. You can load Google fonts, those hosted by TypeKit and really any other on the web. For all the fonts you specify in the loaded these classes are .wf-inactive and .wf-active respectively. You can also test for a certain font with its name and weight. So to check for Reenie Beanie, the class is .wf-reeniebeanie-n4-active when it is available.

You can use this to define the whole style as relying on the font:

.wf-reeniebeanie-n4-active blockquote{
font-family: ‘Reenie Beanie’, sans-serif;
font-size:160%;
background:#eee;
color:#666;
margin:1em 0;
padding:.5em;
}

Even better, the webfont loader also provides you with events to subscribe to:

WebFontConfig = {
google: {
families: [ ‘Tangerine’, ‘Cantarell’ ]
},
typekit: {
id: ‘myKitId’
},
loading: function() {
// do something
},
fontloading: function(fontFamily, fontDescription) {
// do something
},
fontactive: function(fontFamily, fontDescription) {
// do something
},
fontinactive: function(fontFamily, fontDescription) {
// do something
},
active: function() {
// do something
},
inactive: function() {
// do something
}

};

You can use that to display loading messages during font retrieval and all kind of other tricks.

Share on Mastodon (needs instance)

Share on Twitter

Newsletter

Check out the Dev Digest Newsletter I write every week for WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and RAG explained, how AI is reshaping UI and work, how to efficiently use Cursor, VS Code extensions security issues.
159: AI pipelines, 10x faster TypeScript, How to interview How to use LLMs to help you write code and how much electricity does that use? Is your API secure? 10x faster TypeScript thanks to Go!
158: 🕹️ Super Mario AI 🔑 API keys in LLMs 🤙🏾 Vibe Coding Why is AI playing Super Mario? How is hallucinating the least of our worries and what are rules for developing Safety Critical Code?
157: CUDA in Python, Gemini Code Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA about the future of hardware, we look at how AI fails and how to play pong on 140 browser tabs.
156: Enterprise dead, all about Bluesky and React moves on! Learn about Bluesky as a platform, how to build a React App and how to speed up SQL. And play an impossible game in the browser.

My other work: