Divi WordPress Theme

Topic: How do I use .woff fonts for my website?  (Read 3175 times)

Offline Stackoverflow

  • New Member
  • *
  • Posts: 11
  • iTrader: +0/-0
    • View Profile
How do I use .woff fonts for my website?
« on: June 14, 2015, 06:53:45 AM »
Hi,

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

Thanks!
VPS Hosting - AccuWebHosting

Offline Kailash

  • Web Hosting Master
  • *****
  • Administrator
  • Posts: 654
  • iTrader: +153/-0
    • View Profile
Re: How do I use .woff fonts for my website?
« Reply #1 on: June 19, 2015, 07:00:41 PM »
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:

Code: [Select]
@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:

Code: [Select]
<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:
Code: [Select]
.mydiv {
    font-family: myfont
}

Hope this will be helpful to you.

- Kailash

Offline Stackoverflow

  • New Member
  • *
  • Posts: 11
  • iTrader: +0/-0
    • View Profile
Re: How do I use .woff fonts for my website?
« Reply #2 on: July 08, 2015, 04:38:11 PM »
Thanks! I was able to us woff fonts in my website.
Shopify Divi WordPress Theme
Tags: