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

Question

Где вы размещаете шрифты, чтобы CSS мог получить к ним доступ?

Я использую нестандартные шрифты для браузера в файле.woff. Допустим, его 'awesome-font' хранится в файле 'awesome-font.woff'.

Answer 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, и этот генератор генерирует "правильные" шрифты.

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

Больше Ссылка