Я еще раз вас приветствую и поехали. CSS нам предлагает подключение таких шрифтов как Verdana, Arial, Tahoma, Times New Roman и т.п., но бывает и этого не всегда достаточно,и мы хотим найти и подключить какой нибудь экзотический шрифт.

И самое первое что мы можем сделать это подключить шрифт с какого нибудь сервиса через cdn, то есть используя специальную ссылку. Одним из таких сервисов является Google Fonts (https://fonts.google.com/) данный сервис предлагает нам большое количество разных шрифтов, их настройку и удобный интерфейс. Подробно останавливаться на этом сервисе я не буду, скажу что в ближайшем времени запишу видеообзор по данному сервису. Здесь нам понадобится только взять следующий код и вставить в файл CSS:

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

здесь я с google fonts выбрал шрифт Pacifico вставил его в начало css.

Теперь остается только назначить элементу шрифт:

<style>
    @import url('https://fonts.googleapis.com/css?family=Pacifico');
    p{
        font-family: 'Pacifico', cursive;
    }
</style>
 <p>
    Подключение шрифтов с помощью CSS
 </p>

наш новый шрифт Pacifico успешно применился к элементу p, строчку font-family: 'Pacifico', cursive; мы также можем взять с сервиса.

C этим я думаю все понятно. Бывают ситуации когда мы ищем определенный шрифт, а на сервисах типа google fonts его нет или его необходимо купить чтобы пользоваться. Следовательно в таких ситуациях мы можем найти этот шрифт в интернете, причем для корректной поддержки в современных браузерах нам понадобятся пять форматов шрифта(eot, otf, svg, ttf, woff):

ProximaNova-Regular.eot

ProximaNova-Regular.otf

ProximaNova-Regular.svg

ProximaNova-Regular.ttf

ProximaNova-Regular.woff

здесь у нас указаны четыре формата шрифта ProximaNova. Вы можете в принципе найти один из форматов шрифта и воспользуясь специальными сервисами типа(https://www.web-font-generator.com/) сгенирировать все недостающие форматы.

После того как у нас есть пять файлов шрифта с расширением (eot, otf, svg, ttf, woff) мы их должны подключить через CSS, делается это следующим образом:

@font-face {
    src: url('font/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
    url('font/ProximaNova-Regular.woff') format('woff'),
    url('font/ProximaNova-Regular.ttf')  format('truetype'),
    url('font/ProximaNova-Regular.svg#ProximaNova-Regular-Regular') format('svg');
   font-family: 'ProximaNova';
    font-weight: normal;
    font-style:normal;
}

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

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

font-weight - жирность шрифта(bold,300,400 и т. д. )

font-style - стили шрифта(italic, normal)

В нашем случае свойства font-weight и font-style работать не будут, так как мы скачали шрифт с параметром regular, то есть с постоянными параметрами(font-weight:400 и font-style: normal), поэтому их смело можно убрать.

В итоге весь наш код будет выглядеть следующим образом:

<style>
    @font-face {
        src: url('font/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/ProximaNova-Regular.woff') format('woff'),
        url('font/ProximaNova-Regular.ttf')  format('truetype'),
        url('font/ProximaNova-Regular.svg#ProximaNova-Regular-Regular') format('svg');
        font-family: 'ProximaNova';
    }
    p{
        font-family: 'ProximaNova';
    }
</style>
    <p>
        Подключение шрифтов с помощью CSS
    </p>

как видите здесь ничего сложного нет.

На этом дорогие друзья данная статья подошла к концу. Надеюсь вам удалось узнать что то новое.

Я желаю вам успехов и удачи! Пока!