Всем привет, сегодня я вам расскажу как можно поставить новый шрифт, которой не находится в стандартной web библиотеке. Для примера мы будем использовать библиотеку от Google, а так же другие источники. Для начала, как изменить шрифт на своём сайте… Для этого нужно использовать свойство «font-family» (это CSS).
Мы пишем следующие:
font-family: Шрифт;
(если название шрифта состоит из нескольких слов, мы его заключаем в кавычки. Вот так «Название шрифта»)
Стандартные шрифты
Начнём со стандартных шрифтов.
1. Arial
2. Verdana
3. Times
4. Times New Roman
5. Georgia
6. Trebuchet MS
7. Sans
8. Sans
9. Comic Sans MS
10. Courier New
11. Webdings
12. Garamond
13. Helvetica
Тоже стандартные шрифты, но не для всех ОС:
1. Palatino Linotype / Palatino
2. Tahoma
3. Impact
4. Century Gothic
5. Arial Black
6. Arial Narrow
7. Copperplate / Copperplate Gothic Light
8. Gill Sans / Gill Sans MT
Для того что бы их использовать, нужно только указать название в свойстве css.
Это всё что касается стандартных шрифтов.
Как поменять шрифт на сайте ?
Шрифты от Google
Также можно добавлять шрифты из специальных интернет библиотек. Самой популярной, такой библиотекой является Google Fonts.
Она бесплатная, и не требует дополнительного программного обеспечения.
Чтобы установить шрифты с Google Fonts, вам нужно:
- Перейти на данный сайт https://fonts.google.com/
- Выбрать шрифт нажав на значок плюса рядом с названием шрифта.
- После выбора всех нужных шрифтов, нажимаем на скрытую панель снизу сайта
- Появится окно, в котором нам нужно будет скопировать код. Это можно сделать двумя способами:
- скопировать вот этот код, и вставить его в html документ в тег head, а название шрифта разместить в стандартное для этого свойство CSS как показано ниже.
- для второго способа вам необходимо скопировать другой код и вставить его в CSS файл. Импорт-код необходимо разместить на самом верху (это важно). А так же как и в прошлом способе, необходимо разместить название шрифта в специальное для этого свойство(font-family).
Добавление из других источников.
Вначале загружаем сам файл шрифта с помощью правила @font-face. Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src. Дальше используем шрифт как обычно. Так, если нам требуется задать шрифт заголовка, то для селектора h1, как показано в примере, задаём свойство font-family с именем загруженного шрифта.
Это всё что касается добавления шрифтов и изменения шрифтов.
Если у вас есть вопросы, задавайте их в комментариях, я обязательно на них отвечу.
