CODEWITHSUNDEEP
htmlcssfontswoff
Don P
Don P

Reputation: 63748

How do I use .woff fonts for my website?

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'.

Upvotes: 135

Views: 192063

Answers (2)

bhovhannes
bhovhannes

Reputation: 5689

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.

Upvotes: 217

Mr. Alien
Mr. Alien

Reputation: 157404

You need to declare @font-face like this in your stylesheet

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

Now if you want to apply this font to a paragraph simply use it like this..

p {
font-family: 'Awesome-Font', Arial;
}

More Reference

Upvotes: 22

Related Questions