Як використовувати шрифти .woff для свого веб-сайту?

Де ви розміщуєте шрифти, щоб CSS мав доступ до них?

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

Після генерації файлів 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, і цей генератор створює "правильні" шрифти.

Вам потрібно декларувати @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;
}

Більше довідника