Войти
Регистрация

Подключение шрифтов в CSS

Подключение новых шрифтов в CSS

Часто при верстке сайтов приходится использовать нестандартные шрифты, особенно, если дизайн сайта Вам подготавливает дизайнер, который решил использовать нестандартный шрифт некоторых элементов.

Обычно, на компьютере у любого пользователя установлены стандартные шрифты - Arial, Times New Roman, Tahoma и т.д, которые вполне спокойно смогут отобразиться на сайте, если Вы используете те же.

Однако, если Вы используете нестандартные, то их необходимо подключать, чтобы все пользователи могли их увидеть, иначе они автоматически заменятся на стандартные в браузере.

Шрифты подключаются в CSS стили, в нашем случае в файл со стилями в самом его начале, до css-правил. Перед этим необходимо скачать файл шрифтов на любой сайте со шрифтами. Желательно шрифт формата woff и woff2. Пример подключения:

@font-face {
   font-famyly: Arabic;
   src: url("../fonts/ds-arabic.woff") format("woff"), url("../fonts/ds-arabic.woff2") format("woff2");
}

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

Теперь на нашем сайте мы можем, например, тегу <h1> задать новый шрифт:

h1 {
   font-family: Arabic;
}

В итоге мы можем написать текст новым шрифтом: пример текста

Важно, чтобы шрифт поддерживал кириллическое написание.

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

Переходите к следующей статье основ CSS, которая не менее интересна и полезна.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?