Как подключить шрифты с помощью CSS на вашем сайте?

Для подключения шрифтов в CSS веб-страницах, можно использовать несколько способов. Рассмотрим наиболее распространенные из них.

1. Подключение стороннего шрифта с помощью @import

Чтобы подключить сторонний шрифт в CSS с помощью @import, необходимо сначала загрузить шрифт в формате eot,woff,woff2,ttf,svg на сервер и получить ссылку на этот файл. Затем добавляем следующий код в нашу файл стилей:

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

Заменяем в данном примере ссылку на нужный нам файл со шрифтом и сохраняем стиль в формате CSS.

2. Ссылка на сторонний файл со шрифтом с помощью @font-face

Один из распространенных способов подключения шрифтов напрямую с сайта шрифта, это использование правила @font-face. Здесь мы указываем название шрифта, его путь на сервере и набор форматов.

@font-face {

font-family: 'Open Sans';

src: url('https://fonts.googleapis.com/css?family=Open+Sans');

}

Как и в предыдущем примере, мы указываем название шрифта и ссылку на него, но уже через src.

3. Локальное подключение файла со шрифтом

Локальное подключение файла со шрифтом осуществляется через знак @. Таким способом мы указываем установленный в системе шрифт, который нам необходим.

@font-face {

font-family: 'My-Custom-Font';

src: url('my-custom-font-content.eot'),

url('my-custom-font-content.woff2') format('woff2'),

url('my-custom-font-content.woff') format('woff');

}

Здесь мы указали путь к файлу и его расширение. Обратите внимание, что последним указывается формат woff. Если нельзя сохранить ваш шрифт в формате woff, то используйте только формат eot для Internet Explorer и формат ttf или otf для остальных браузеров.

Пример использования шрифта в стилях:

body {

font-family: 'Open Sans', sans-serif;

}

Мы указываем название шрифта в свойстве font-family, вначале ставим имя веб-шрифта, потом откатываемся на стандартный. Если указанного шрифта на компьютере нет, то стандартный будет использован.

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