Установка шрифта на сайт - весьма не быстрое занятие. Каждый тип шрифта можно обработать - скруглить края, увеличить интервал и т.д.
Более того, шрифтов огромное множество в интернете, а предустановленных в браузере наоборот мало.
Если вы хотите подобрать себе нестандартный шрифт (мультяшный, кривой, средневековый, как в фильмах и т.п.), то вам придется скачивать шрифт отдельно с google fonts.
К примеру, на этом сайте, где вы находитесь, шрифт похож на обычный arial с кругленными краями, но на самом деле этот шрифт отдельно установлен с google fonts.
Простой способ установки шрифта (обычные системные css, html шрифты), не скачанного из интернета
Для начала покажу вам "азы" - как установить или изменить обычный шрифт.
Если вы хотите установить шрифт для всего сайта, то просто вставляете в css следующую строку в тег BODY:
body{
font-family:Arial, Helvetica, sans-serif; /*шрифт для текста на сайте.*/
font-size: 16pt; /*каким будет размер вашего текста по-умолчанию */
color:black; /*цвет текста на сайте по-умолчанию черный*/
line-height: 2.5; /*устанавливает величину пространства между строками*/
}
Небольшое пояснение. Для font-family можно подбирать следующие значения, которые могут немного изменять ваш шрифт:
serif — шрифты с засечками (антиквенные), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
cursive — курсивные шрифты;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
Как установить шрифт для блока или отдельной части текста
Если вы хотите выбрать шрифт для отдельного блока на сайте или текста, то просто создаете ему отдельный класс и прописываете css аналогичным образом, НО только для конкретного класса.
Создаете в html-коде нужный класс.
вот тут текст текст текст, а вот <div class="font1"> тут шрифт будет другой</div>, а вот тут шрифт опять обычный...
В css для этого класса прописываете новый шрифт.
.font1{
font-family:Arial, Helvetica, sans-serif; /*шрифт для текста на сайте.*/
font-size: 16pt; /*каким будет размер вашего текста по-умолчанию */
color:red; /*цвет текста на сайте по-умолчанию черный*/
line-height: 2.5; /*устанавливает величину пространства между строками*/
}
!!!!---Не рекомендуемый вариант установки шрифта!---!!!
Теперь покажу вам вариант посложнее. К примеру, мы хотим установить шрифт не похожий на другие.
Для этого нам придется скачать отдельный ttf-файл со шрифтом с любого шрифтового сайта и закинуть его в главную директорию вашего сайта, после чего прописать путь к шрифту в css, таким образом:
@font-face {
font-family: "CustomFont";
src: url("путь к вашему шрифту/шрифт.eot");
src: url("путь к вашему шрифту/шрифт.woff") format("woff"),
url("путь к вашему шрифту/шрифт.otf") format("opentype"),
url("путь к вашему шрифту/шрифт.svg#filename") format("svg");
}
body {
font-family: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}
Скачанный шрифт готов к работе!
КАК УСТАНОВИТЬ СКАЧАННЫЙ ШРИФТ ИЗ ИНТЕРНЕТА?
!--Рекомендуемый вариант установки шрифта--!
Я предлагаю вам еще один вариант, но чуть легче и проще.
Шаг 1. Заходите на сайт fonts.google.com
Шаг 2. Ищите понравившийся вам шрифт из предложенных.
Обязательно в Фильтре language (пометил красным на скриншоте) выберете Cyrillic или Cyrillic Extended! Это будет означать, что шрифт поддерживает кириллицу (русские буквы и символы) Это важно т.к., если шрифт не будет поддерживать русские буквы и вы поставите его себе на сайт, то шрифт просто не измениться и не будет работать.
Шаг 3. После того, как вы выбрали шрифт - жмите на него.
Шаг 4. Вас перекинет на страницу с вариантами толщины шрифта. Выберете нужный и нажмите справа на надпись + Select this style.
Шаг 5. Вам будет предложено скачать шрифт или встроить его на сайт через удаленный скрипт (вкладка EMBED).
Тут вы сами вольны выбрать скачаете ли вы шрифт или встроите через скрипт-ссылку. Я рекомендую встроить его через ссылку. Аргументирую это тем, что серверы гугл очень быстрые и шрифт загрузиться намного быстрее, нежеле чем он грузился бы у вас из директории вашего сайта. Более того, ссылку можно легко редактировать, изменяя размер и толщину шрифта, а со скачанным файлом такое провернуть сложно. И еще один аргумент в пользу ссылки-скрипта - можно легко избавиться от багов шрифта.
Шаг 6. Ссылку-скрипт с google fonts вставляете в HEAD вашего сайта:
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&display=swap&subset=cyrillic-ext" rel="stylesheet">
</head>
Затем вставляете в ваш css (стилевой файл) импортную (@import) ссылку и сразу же в css (в теге BODY) прописываете новое название вашего нового шрифта в font-family:
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700&display=swap&subset=cyrillic-ext');
body
{
font-family:"PT Sans Caption",Verdana,Dejavu,Sans;
}
Вот и всё! Теперь ваш шрифт будет работать. С помощью ссылки для встраивания мы получили меньше морок, выше скорость загрузки шрифта и меньше нагрузки на сервер.
