Импорт шрифтов для CSS



Приветствую всех, кто зашёл сюда. Из интереса ли или в поисках ответа на свои вопросы. В этой статье я опишу метод импорта шрифтов для ваших CSS в творчестве. Надеюсь, что уровень оформлений вырастет ещё сильнее, и я кому-то помогу решить возникшие вопросы.
P.s: Это мой первый «гайд», поэтому не ругайтеся.


Для импорта шрифтов нам понадобится:
• Файл с самим шрифтом в формате ttf/otf.
• Аккаунт на облачном хранилище Dropbox. (Я использую его, однако не исключаю, что есть возможность импортировать и с других «облаков». Я просто не знаю как.).
• Немного свободного времени.


Итак, начнём по порядку. Где взять файл? Разумеется в Интернете. Существует много сайтов с подборками шрифтов, где вы сможете найти то, что вам приглянется. Важно знать, что очень многие шрифты не имеют символов кириллического алфавита, а следовательно текст на русском языке не будет отображаться. Постарайтесь найти версию с кириллицей или альтернативу.
Не реклама, мне никто не платил, но: fonts-online.ru — здесь можно поискать.


Для примера возьмём с сайта шрифт Larisa script с сайта, ссылка на который выше.


Собственно, голубая кнопка «Скачать», в левом верхнем углу будто кричит, что и куда нужно нажимать. Скачиваем. Может загрузится сам файл или архив с ним. Нам нужен файл самого шрифта. Вытащите его туда, где вам будет удобно.

Переходим к следующему этапу. Облачное хранилище Dropbox. Регистрируетесь и попадаете на домашнюю страницу. А дальше всё просто. Перетащите файл шрифта в центральную часть сайта. Вокруг появится синяя пунктирная рамка и вы загрузите файл в облако.


Теперь внимание! Слева внизу появится меню с недавно загруженными файлами. Там и будет наш файл шрифта. Нам нужно «Скопировать ссылку».

htts://www.dropbox.com/s/wsrplfds3a0pku8/Larisa%20script.ttf?dl=0 (Специально сломал ссылку, чтобы вы случайно не скачали себе шрифт.)

Теперь идём на наш любимый сайт Darkmoon и открываем ваше творчество, будь то отчёт, анкета или новый центр игры. Спускаемся в самый низ к ужасающему полю CSS. После <style>
мы вставляем следующее:

@font-face {
font-family: «Larisa script»; — Пропишите тут название своего шрифта. src:url(«dl.dropboxusercontent.com/s/wsrplfds3a0pku8/Larisa%20script.ttf»);
}


Внимательные могли заметить, что ссылка импорта для CSS немного отличается от скопированной ранее ссылки. Для корректной работы от ссылки с Dropbox нам нужен только хвостик после /s/ Также очень важно чтобы в названии шрифта были двойные кавычки, но не ёлочкой! («») Так же важно располагать все импортируемые шрифты в начале CSS-кода! Иначе сайт не сможет прогрузить шрифт, который требует какой-то из элементов страницы.


Теперь, прописывая в коде свойство font-family: «Larisa script»;, элемент, которому вы присвоили это свойство будет использовать этот шрифт для текста внутри себя. Например:

body {
font-family: «Larisa script»;
}

Этот код заставит весь текст на странице использовать импортированный нами шрифт.

А на этом всё. Надеюсь эта маленькая статья кому-то да пригодится. Если будут вопросы, можете обращаться ко мне в Discord: Мэрич#7530. Быть может в будущем, я напишу ещё что-нибудь про CSS.











+4
10:06
170
Нет комментариев. Ваш будет первым!