Как использовать шрифты .woff для моего сайта?

Ответ 1

После генерации файлов woff вы должны определить семейство шрифтов, которое можно использовать позже во всех стилях CSS. Ниже приведен код для определения семейств шрифтов (для обычных, полужирных, полужирных, курсивных) шрифтов. Предполагается, что есть 4 *.woff файлы (для упомянутых шрифтов), помещенные в подкаталог fonts.

В коде CSS:

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

После этих определений вы можете просто написать, например,

В HTML-коде:

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

В коде CSS:

.mydiv {
    font-family: myfont
}

Хороший инструмент для генерации файлов woff, которые могут быть включены в таблицы стилей CSS, находится здесь. Не все файлы woff работают корректно в соответствии с последними версиями Firefox, и этот генератор создает "правильные" шрифты.

Ответ 2

Вам нужно объявить @font-face как это в вашей таблице стилей

@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');
}

Теперь, если вы хотите применить этот шрифт к абзацу, просто используйте его так.

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

Дополнительная ссылка