Question

Where do you place fonts so that CSS can access them?

I am using non-standard fonts for the browser in a .woff file. Let’s say its ‘awesome-font’ stored in a file ‘awesome-font.woff’.

Answer 1

After generation of WOFF files, you have to define font-family, which can be used later in all your css styles. Below is the code to define font families (for normal, bold, bold-italic, italic) typefaces. It is assumed, that there are 4 *.WOFF files (for mentioned typefaces), placed in fonts subdirectory.

In CSS code:

@font-face {
  font-family: "myfont";
  src: url("fonts/awesome-font.woff") format('woff');
}

@font-face {
  font-family: "myfont";
  src: url("fonts/awesome-font-bold.woff") format('woff');
  font-weight: bold;
}

@font-face {
  font-family: "myfont";
  src: url("fonts/awesome-font-boldoblique.woff") format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "myfont";
  src: url("fonts/awesome-font-oblique.woff") format('woff');
  font-style: italic;
}

After having that definitions, you can just write, for example,

In HTML code:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

In CSS code:

.mydiv {
  font-family: myfont
}

The good tool for generation WOFF files, which can be included in CSS stylesheets is located here. Not all WOFF files work correctly under latest Firefox versions, and this generator produces ‘correct’ fonts.