Using Web Fonts

My colleague’s google+ post reminded me the existence of Web fonts so I decided to use it on my website. I was also inspired by a website that used Helvetica with light font-weight, and I wanted to give a similar look on my website. So here’s an easy 3 steps to use Web fonts on your website:

  1. Go to and other websites and pick your favorite fonts.
  2. Add the following CSS rules to your website:

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

    “My Font” is the name of the font you picked and My-Font.woff is the relative path to the woff font you placed. Google Web Fonts provides free woff files and there are several online services that convert OpenType or TrueType fonts to WOFF files. Note: make sure to comply with font’s license; for example, most of fonts that come with Microsoft Windows and Mac OS X cannot be used as Web fonts without explicit permissions from their copyright holders.

  3. Add font-family: ‘My Font’; to wherever you’d like to use the font.

Note that you have to do step 2 for each font family, font style, and font weight. So if I wanted to use font-family: 'My Font'; font-style: italic, then I’d have to provide a new woff file for My Font with italic style. And I have to do the same for different font weights.

Also be aware that old web browsers ignore @font-face rules so you would have to specify appropriate fall-back sequences for font-family.

On my website, I use font-family: "Open Sans", "Helvetica", "Meiryo", sans-serif; for the article texts where “Open Sans” is the Web font.