• Welcome to Web Hosting Community Forum for Webmasters - Web hosting Forum.
 

Recommended Providers

Fully Managed WordPress Hosting
lc_banner_leadgen_3
Fully Managed WordPress Hosting

WordPress Theme

Divi WordPress Theme
WPZOOM

Forum Membership

Forum Membership

How do I use .woff fonts for my website?

Started by Stackoverflow, June 14, 2015, 06:53:45 AM

Stackoverflow

Hi,

I have .woff forns files. How can I use in my code to use .woff fonts for my website?

Thanks!

Kailash

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;
}


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
}


Hope this will be helpful to you.

- Kailash

Stackoverflow

Thanks! I was able to us woff fonts in my website.