Как подключить шрифт в CSS?
Сегодня мы поговорим о том, как подключить новый шрифт css к вашему сайту, что бы сделать его более оригинальным и привлекательным для посетителей.
Навигация по статье:
- Как подключить шрифт CSS?
- Где скачать шрифты для подключения к сайту через CSS?
В стандартном наборе содержится большое количество шрифтов, но, к сожалению, они не всегда соответствуют нашим требованиям. В этом случае мы можем выйти из ситуации, скачав новый понравившийся нам в интернете и подключить шрифт в css-файле.
Как подключить шрифт CSS?
- 1. Заходим на сайт-каталог шрифтов. Их легко можно найти в поиске. Ниже я приведу пример одного довольно удобного сайта, который я обычно использую.
- 2. Выбираем и скачиваем любой понравившийся нам. Чаще всего вам предоставляется для скачивания несколько файлов с различными вариантами исполнения (жирный, курсив, и т.д.), а так же с различными расширениями.
Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff
@ font — face < font - family : 'Font Name' ; src : url ( 'fonts/ Font Name.ttf' ) format ( 'truetype' ) ; font - weight : normal ; font - style : normal ;
Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.
Вот примеры подключения в CSS наиболее популярных форматов:
src : url ( ‘fonts/ Font Name.woff’ ) format ( ‘woff’ ) ;
src : url ( ‘fonts/ Font Name.eot’ ) format ( ‘eot’ ) ;
src : url ( ‘fonts/ Font Name.svg’ ) format ( ‘svg’ ) ;
font — family : ‘ JuraBook ‘ ;
. main — navigation ul li a <
font - family : 'JuraBook' ;
font - size : 18px ;
Где скачать шрифты для подключения к сайту через CSS?
На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com
Вот его основные преимущества по сравнению с другими ресурсами:
- Большой выбор шрифтов для сайта
- Большинство шрифтов представлены сразу в нескольких форматах
- Есть наглядный предпросмотр с возможностью изменять размер и выбирать варианты текста для разных языков.
Как видите, в подключении шрифта в CSS нет ничего сложно. Используя показанный в этой статье способ, вы можете подключить к своему сайту любой понравившийся шрифт, и тем самым сделать его более интересным и оригинальным.
Так же, в одной из моих прошлых статей я рассказывала, как подключить к сайту Google Fonts. Если вам интересно, то вы можете ознакомиться со статьей по этой ссылке: Красивые шрифты Google Fonts для вашего сайта
Не забывайте делиться статьей в социальных сетях и оставлять свои комментарии. Это поможет мне понять, интересует ли вас данная тема и стоит ли делать подобные статьи.
А на сегодня у меня все. Желаю вам успехов в создании сайтов!
До встречи в следующих статьях!
С уважением Юлия Гусарь