Как добавить пользовательский (кастомный) шрифт при помощи CSS

CSS-правило @font-face позволяет подгружать пользовательские (кастомные) шрифты к странице. Добавление в таблицу стилей этого правила заставляет браузер загружать шрифт из места его хранения, а затем отображать в соответствии с CSS.

Без этого правила дизайн ограничен шрифтами, которые уже загружены на компьютер пользователя, что может варироваться в зависимости от используемой операционной системы. Ниже представлен анализ существующих системных шрифтов.

Максимальная поддержка браузеров:

Это метод с максимально возможной на данный момент поддержкой различных браузеров. Правило @font-face должно быть добавлено в самом начале файла css.

@font-face {
  font-family: 'MyWebFont'; /*Название шрифта*/
  /*в url задаётся адрес того или иного файла*/
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Затем применяем этот шрифт к элементам вот так:

[hmtl]
body {
font-family: ‘MyWebFont’, Fallback, sans-serif;
}
[/html]

Chrome Safari Firefox IE Android iOS
5+ 5.1+ 3.6+ 11.50+ 9+ 4.4+ 5.1+

Альтернативные методы

@import

В то время как @font-face прекрасно подходит для шрифтов, которые расположены на ваших собственных серверах, могут быть ситуации, когда лучшим решением будет шрифт на хостинге. Google Fonts предлагает этот способ использования своих шрифтов. Следующий пример использования @import для загрузки шрифта Open Sans с сервиса Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

После этого мы можем применить его к элементу:

body {
  font-family: 'Open Sans', sans-serif;
}

Если вы откроете URL шрифта, то вы увидите, что на стороне хостера работает @font-face.

Преимущество использования сервиса шрифтов заключается в том, что скорее всего он включает все возможные файлы, что обеспечивает более полную кросс-платформенную совместимость без необходимости хранения и подключения этих файлов вручну.

-ование файла css

Схожим образом вы можете связать такое же вложение, как и любой другой CSS фильтр, в head-части HTML документа, а не в CSS-файле. Используя тот же пример с Google Fonts:

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Затем мы можем применить этот шрифт к нашим элементом также как и при помощи других методов:

body {
  font-family: 'Open Sans', sans-serif;
}

Again, this is importing the @font-face rules but, instead of injecting them to our stylesheet, they are added to our HTML instead. Опять-таки, это импорт @font-face, но вместо их вставки в css-файл, они добавляются в тег head вместо этого.

Оригинал