How do I use .woff fonts for my website?


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


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

It will honestly mean your site does not get indexed. But if you want to have your content indexed, you must add alt content to all of your images.

As per the material icon's documentation

It’s easy to incorporate icons into your web page.

<i class="material-icons">face</i> // rendered as face

This example uses a typographic feature called ligatures, which allows rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference

And here is the detailed answer on

How do ligature icons work in Material Icons?

You can try the below snippet.

  h2 {
        font-family: "Arial Narrow";
        font-size: 22px;
        letter-spacing: 0px;

    .header_p {
        font-family: "Arial Narrow";

    h2, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;

    .header_p, x:-moz-any-link {
        font-family: "Arial";
        font-stretch: condensed;

targeting a specific browser with css

I am not sure whether that font family is supported by firefox or not but you can Target only firefox using

@-moz-document url-prefix() {
    h1 {
        color: red;

See complete documentation here

You can target IE as

<!--[if IE]>
  // Your css for IE or   
  // Perhaps importing a specific style sheet as
  <link rel="stylesheet" type="text/css" href="ie9_and_below.css" />

target chrome only

@media screen and (-webkit-min-device-pixel-ratio:0) { 
      color: red;