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

Question 1

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

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

Question 2

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

В коде 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, и этот генератор производит «правильные» шрифты.

Question 3

Вам нужно объявить @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;
}

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