Изначально эта информация должна была быть на видео, и может я запишу его по приезду, но пока просто не имею такой возможности, поэтому текст. Поехали!
Итак, как можно подключать шрифты? Обычно используются два основных метода. Каждый из них хорош и каждый приемлем. Рассмотрим по отдельности.
- Подключение шрифта от Google Fonts.Простейший вариант, который Вы можете использовать. Но есть один главный минус — там довольно мало шрифтов, и очень часто приходится использовать сторонние. Тем не менее, если шрифт из макета есть в Google Fonts — смело используйте.Как это делать? Заходите на Google Fonts Google Fonts, в строке search вводите название нужного вам шрифта и жмете Enter. Если шрифт имеется — он будет сразу же Вам показан, и вот тут то самое интересное — как скачать и поставить себе на сайт?Очень даже просто. Нажимайте на «плюсик» в правом верхнем углу описания шрифта.
После этого нужно нажать на Family Selected. Выезжающий блок покажет вам дополнительные настройки. Здесь нужно перейти на вкладку Customize и выбрать нужные начертания шрифта. Например, Regular и Bold.
Далее вернуться во вкладку Embed и воспользоваться специальным кодом. Он начинается с link, прямо как ссылка на css-файл.
Этот код нужно вставить в тег head, рядом с подключением css-файла. Это и будет ваше подключение шрифта. Но после этого он работать еще не будет. Нужно задать шрифт конкретному элементу:CSS
.box {
font-family: ‘Roboto’;
{Только в этом случае шрифт будет работать.
Легко? Уверен, что да. А теперь перейдем к более сложному способу. Но и более кастомизированному.
- Подключение сторонних шрифтов через font-face.С подключением данных шрифтов не все так просто и гладко, однако этот способ даже лучше. На сайта Google Fonts нет огромного кол-ва шрифтов, а подключить сторонний шрифт можно.Сразу оговоримся, что вам нужно будет иметь НЕСКОЛЬКО форматов шрифтов. от eot до svg. Как получить эти форматы? Очень просто.Либо скачивать шрифты с fonts4web, где Вам в архиве предоставят все необходимые форматы, либо играться вручную, если и на этом сайте нет их. Я для этого использую вот этот сервис. Очень удобно и всегда работает.С форматами разобрались, но как же это все подключать? У нас на выходе будет папка с кучей шрифтов (и форматов), что с ними делать? Показываю :)Все делается через css. Лучше будет, если все будет в отдельном файле.
fonts.css
CSS
@font-face{
font-family: ‘Roboto’;
src: url(‘../fonts/Roboto.eot’);
src: url(‘../fonts/Roboto.eot?iefix’) format(‘eot’),
url(‘../fonts/Roboto.woff’) format(‘woff’),
url(‘../fonts/Roboto.ttf’) format(‘truetype’),
url(‘../fonts/Roboto.svg#webfont’) format(‘svg’);
font-weight: normal;
font-style: normal;
}Такой код нужно расписать для каждого начертания. И, если у вас есть Sass, то можно делать как я (да и многие другие) — использовать миксины. Это упрощает работу, но об этом уже я расскажу на видео верстки макета.
И да, естественно, нужно включить шрифты для конкретного элемента специальным свойством font-family.
Разумеется, более подробно Вы увидите и почувствуете всю работу со шрифтами на реальном примере, когда выйдет видео по верстке макета. Как раз в самом первом видео и будет разобрана эта и другие темы моей подготовки к верстке.
На сегодня у меня все, предвкушаю возвращение домой, в работу, тем более ее накопилось просто уйма! Всем желаю прекрасного настроения и удачи! До новых встреч!
Автор данного блога. Веб-разработчик. Фрилансер. Создаю крутые адаптивные сайты. Портфолио на https://maxgraph.ru/
Добавляйтесь в друзья Вконтакте! Каждому добавившемуся и написавшему в личку «хочу полезность» — подарю набор крутых ссылок для верстальщика :)