Using Google’s webfonts

If you are searching for a cool font for your website you have at least 2 problems:

  1. Where to find a cool font with a adequate licence (OpenSource, Public Domain and so on)
  2. How do I manage that all visitors of my website this font have installed?

Embedding fonts in your website

Every current browser supports loading fonts at runtime and embeds this font into the website (see Webfonts). So the visitor must not manually downloading and installing the font first.

With Google’s webfonts you can choose a cool font (all are Open Source) and embedding this into your website. This you can do with

  • Adding a stylesheet link statement in your page header
  • Using the @import statement in your css
  • Using javascript

If you want to embed with a stylesheet link add only

<link href='' rel='stylesheet' type='text/css'>

to your webpage header. Another approach is to use the @import statement directly in your css:

@import url(;

With both variants you can reference the font with

font-face: Ubuntu, serif;

Ubuntu is only one the fonts Google offers.
If you want to use Javascript to add a webfont to your webpage you can use this snippet:

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Ubuntu:300:latin' ] }
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

And now you have a nice font for your website.

But how does this work?

There is the @font-face definition in CSS3. This the Google Webfont-API use, too. If you load the URL you see in the examples above  a small css snippet will be returned:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: normal;
  src: local('Ubuntu'), url('') format('woff');

So you can see that Google reuse the current web standards.

Comments are closed.