O'Reilly logo

Instant HTML5 Fonts and Typography by K. Jaouher

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using Web fonts(Simple)

Using a font hosted in the web server is not the only solution. Sometimes, it is better to use fonts hosted in distant servers for many reasons such as support services and special loading scripts.

A lot of solutions are widely available on the web such as Typekit, Google fonts, Ascender, Fonts.com web fonts, and Fontdeck. In this task, we will be using Google fonts and its special JavaScript open source library, WebFont loader.

Getting ready

Please refer to the project WebFonts to get the full source code.

How to do it...

We will get through four steps:

  1. Let us configure the link tag:
      <link rel="stylesheet" id="linker" type="text/css" href="http://fonts.googleapis.com/css?family=Mr+De+Haviland">
  2. Then we will set up the WebFont ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required