Как подключить шрифт из google fonts в css

Как подключить шрифты Google Fonts

В этом туториале вы узнаете как подключить шрифт Google Fonts к своей страничке.

1. Выберите нужный шрифт

Зайдите на главную страницу Google Fonts и найдите нужный вам шрифт.

1.1. Если сходу он не находится, можно воспользоваться поиском.

2. Выберите нужную версию шрифта

У каждого шрифта есть несколько версий. Отличаются они, прежде всего, весом. Обозначается вес числом, и чем больше, тем толще шрифт. Вес 100 — это совсем тонкий шрифт. Вес 900 — очень толстый, его используют в заголовках.

Кроме цифры у веса бывает ещё своё название. Его указывают исключительно для удобства:

• Light 300 — тонкий шрифт
• Regular 400 — обычный шрифт
• Bold 700 — жирный

Шрифты кроме веса отличаются также наклоном. Если хотите наклонный шрифт, то ищите в названии слово Italic . Например: Regular 400 Italic — это обычный наклонный шрифт. Bold 700 Italic — это жирный наклонный.

3. Получите код для подключения

Выберите нужную версию и нажмите Select this style . Если вам понадобится сразу несколько шрифтов – обычный, жирный, наклонный и так далее —, то выберите сразу несколько.

Справа всплывет менюшка, там жмите Embed . Вы получите код для подключения шрифта и inline-стиль для подключения.

Если менюшка не открылась, её можно открыть вот тут:

4. Подключите шрифт

Добавьте полученный тег в тег у вас на сайте, а стиль добавьте элементу, который хотите отобразить этим шрифтом:

html> head> link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet"> head> body> p>Обычный текстp> p style="font-family: 'Comic Neue', cursive;">Текст в шрифте Comic Neuep> body> html> 

Скриншот результата. Как видите, на русском и на английском шрифт выглядит по-разному:

Попробуйте бесплатные уроки по Python

Получите крутое код-ревью от практикующих программистов с разбором ошибок и рекомендациями, на что обратить внимание — бесплатно.

Переходите на страницу учебных модулей «Девмана» и выбирайте тему.

Как подключить гугл шрифты Google Fonts

Недавно, как обычно, просматривал группы во Вклнтакте о веб-дизайне и столкнулся с тем, что многие не то что не используют, а даже не слышали о возможности подключать шрифты для сайта через сервис Google Fonts.

Тут же решил написать заметку в блог, чтобы вы, дорогие читатели, были в курсе об этом замечательном инструменте.

Как подключить гугл шрифты

Конечно, в первую очередь нас интересуют русские шрифты, поэтому заходим на сайт и выбираем во вкладке «Language» Cyrillic или Cyrillic Extended.

Таким образом, мы отфильтровали все шрифты и оставили только русскоязычные. На момент написания статьи кириллических 113, а расширенных кириллических 78.

Далее, во вкладке «Сategories» можно поставить фильтр на отображение шрифтов, которые не имеют засечек, выбрать рукописный и так далее.

Выпадающий список в «Font properties» позволяет задать дополнительные настройки и отфильтровать шрифты по ширине, толщине и другим параметрам, а галочка напротив «Show only variable fonts» позволяет отсеять не вариативные шрифты, в которых не предусмотрены сразу несколько видов толщины, наклона или курсива.

После того, как определились со шрифтом кликайте по нему и вас перебросит на страницу, где можно выбрать какие именно типы вам нужны.

Теперь можете выбрать жирность и курсив, которые необходимы в вашем проекте, кликая по «Select this style». Кстати, если вам нужен еще и другой шрифт, вы может вернуться на шаг назад и подключить его тоже. Нам не предлагают подключать все и сразу, потому что увеличит вес файлов и замедлит загрузку сайта в целом. Поэтому, такая тонкая кастомизация только в плюс.

Если список вас устраивает, то переходите во вкладку Embed. Тут вас ждет дальнейшая инструкция по подключению.

Если вы планируете подключать шрифты в шапке сайта, то разместите между тегами «head» полученную строку. В моем случае это:

Для использования Google Fonts в CSS, у нужного класса или тега нужно указать:

font-family: 'Roboto', sans-serif;

Кроме того, шрифт можно импортировать через CSS. Перейдите во вкладку «@import» и скопируйте предложенную строку в свою таблицу стилей.

Не забывайте, что все импорты из других файлов в CSS нужно делать в начале документа.

Вот и все, теперь вы знаете, как подключить шрифты Google к своему сайту. Если есть вопросы, задавайте их в комментариях.

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

08/10/2022 Дмитрий Давыдов

8 комментариев

Полезная информация. пару месяцев искала ее назад. Много времени потратила.

Здравствуйте, спасибо за ваш комментарий, впереди еще много интересного, подписывайтесь на rss или twitter чтобы не пропустить новые статьи

А в какой последовательности необходимо подключать шрифт с помощью такой ссылки? Я имею в виду в head содержится много ссылок и как выбрать правильно расположение для данной? Я слышал, что порядок подключения играет роль. Например, все css подключают в начале, а js-файлы в конце.

Сss подключают первыми, так как они отвечают за отображение страницы. Js подключают позже, так как он используется, чаще всего, после того, как отобразилась страничка. Иногда, есть возможность подключить js в конце страницы, как и css, иногда это играет ключевую роль и нельзя. Все зависит от конкретного случая. Шрифт гугл, ну подключите после основного файла стилей. В данном случае это не критично и вы не заметите разницы, где бы не расположили. Но все css подключать до использования js. Все это связано с тем, что команды выполняются синхронно, друг за другом. И если скрипты «Тяжелые» то их загрузка может занять слишком много времени. Поэтому, сначала подключают то, что отвечает за основное оформление, а потом второстепенные функции. Как-то так, надеюсь, что общая картина понятна. Конечно, есть возможность грузить скрипты асинхронно и это ускорит их загрузку, но это уже другая история.

Сергей, если вы используете шрифт в своем файле стилей, то подключать шрифт надо ДО подключения своего файла стилей.

remenergo.pro

Спасибо, полезная информация, как раз искал — что лучше @import или link для шрифтов. Раньше все время подключал через импорт якобы, чтобы код чище был, а оказывается это влияет на скорость, будем исправлять.

Подключение шрифтов CSS. Работа с веб-шрифтами. Google Fonts

Первая часть главы посвящена знакомству с CSS шрифтами. На этой странице вы узнаете, как подключать шрифты в CSS, что такое веб-шрифты и как с ними работать, какие форматы шрифтов бывают, как пользоваться Google Fonts. Для начала рассмотрим легкий пример подключения шрифта CSS:

Этот небольшой кусочек кода означает, что ко всем тегам

применен шрифт Verdana. Свойство font-family устанавливает, какой шрифт или семейство шрифтов будет использоваться. Корректное отображение этого стиля в браузере пользователя зависит от того, установлен ли на его компьютере заданный шрифт. В нашем случае, если на компьютере пользователя отсутствует шрифт Verdana, то браузер отобразит шрифт, установленный по умолчанию.

В свое время дизайнерам приходилось дополнительно указывать несколько запасных шрифтов на случай, если на компьютере пользователя будет отсутствовать основной. Допустим, вы желаете оформить текст шрифтом Verdana, а в качестве запасных установить шрифты Trebuchet MS, Geneva и любой шрифт без засечек. Записывается это таким образом:

При обработке этого кода браузер сначала проверит наличие шрифта Verdana на компьютере пользователя. Если шрифт присутствует, содержимое тегов

отобразится этим шрифтом. Если шрифт отсутствует, браузер проверит наличие следующего по списку шрифта – Trebuchet MS. Если и этот шрифт отсутствует, будет проверяться наличие следующего шрифта – Geneva. Если на компьютере пользователя нет и Geneva, браузер выберет другой доступный шрифт без засечек и отобразит текст им.

Обратите внимание: в коде мы записали название шрифта Trebuchet MS в кавычках. Необходимо брать название шрифта в двойные либо одинарные кавычки тогда, когда в нем содержатся пробелы.

О том, что такое шрифт с засечками (serif) и без (sans-serif), вы можете прочитать на странице Википедии.

Веб-шрифты

Вышеприведенный способ использования шрифтов имеет огромный минус – вы ограничены в количестве шрифтов. Вам придется довольствоваться лишь теми их вариантами, которые, вероятнее всего, установлены на большинстве компьютеров.

Каким же образом можно увеличить выбор шрифтов, чтобы сделать дизайн страницы индивидуальным, добавить оригинальности? На помощь приходят веб-шрифты. Читайте главу дальше и вы узнаете, как с ними работать.

Итак, для отображения нужного шрифта в браузере пользователя нам необходимо, чтобы этот шрифт сам загружался на его компьютер. Осуществить это довольно просто. Такой метод подключения шрифтов к CSS открывает действительно широкие возможности перед дизайнерами. Но стоит упомянуть и о ложке дёгтя в бочке мёда: во-первых, не каждый браузер поддерживает определенный формат шрифта (что приведет к тому, что шрифт не отобразится), а во-вторых, если файл со шрифтом имеет большой вес, это может замедлить загрузку страницы.

Поддержка форматов

Как бороться с проблемой несоответствия формата файла? Давайте взглянем на таблицу, где показаны наиболее популярные форматы шрифтов и узнаем, какие браузеры их поддерживают:

Примечание: актуальную информацию о поддержке форматов шрифтов вы всегда можете узнать на сайте caniuse.com. В строку поиска необходимо ввести название формата (например, ttf).

Если вы ориентируетесь на современные браузеры, вам достаточно будет использовать формат шрифта TTF – наиболее распространенный и используемый. В случае, когда вам необходимо иметь несколько форматов одного шрифта, вы можете воспользоваться специальными онлайн-конвертерами из одного формата в другой, а затем подключить все файлы по очереди. Таким образом браузер сможет выбрать тот формат шрифта, с которым он работает.

Подключаем веб-шрифт с помощью @font-face

Предположим, у вас есть свой уникальный шрифт под названием MyUniqueFont в формате TTF и вы желаете, чтобы основной текст веб-страницы отображался именно этим шрифтом. Первое, что нужно сделать, это скопировать файл шрифта в папку, где находятся все остальные файлы сайта. Чтобы не создавать беспорядок, вы можете создать отдельную папку специально для шрифтов, назвав ее, к примеру, fonts .

Далее нам необходимо дать команду браузеру загрузить шрифт MyUniqueFont . Записывается это с помощью директивы @font-face следующим образом:

@font-face < font-family: MyUniqueFont; src: url('fonts/MyUniqueFont.ttf'); >

Свойство font-family в данном случае играет другую роль: с помощью него мы присваиваем имя шрифту, чтобы потом использовать это имя при написании стиля:

Во второй строке указывается путь к файлу шрифта. В нашем примере файл MyUniqueFont.ttf находится в папке fonts . У вас URL-адрес может отличаться.

Шрифты Google Fonts

Компания Google дает возможность легко подключать любой шрифт из коллекции Google Fonts. Всё, что вам необходимо сделать, чтобы начать использовать понравившийся шрифт, – указать несколько настроек на странице шрифта в Google, после чего скопировать специальную ссылку на этот шрифт и добавить в ваш веб-документ.

Примечание: вся коллекция шрифтов от Google доступна на сайте Google Fonts. На странице можно воспользоваться различными фильтрами для поиска шрифтов по категориям, толщине, алфавиту.

Ниже мы опишем каждый шаг подключения шрифта от Google. Чтобы понимать, о чем идет речь, выберите любой шрифт со страницы Google Fonts и откройте его, нажав на кнопку Quick-use .

Шаг 1: выберите начертание

Первым делом на странице выбранного шрифта отобразятся варианты его начертания, а также иконка спидометра, которая означает не что иное, как скорость загрузки шрифта. Чем больше стилей для шрифта вы выбираете, тем больше времени потребуется на его загрузку. Поэтому рекомендуется выбирать только те варианты начертания, которые планируется использовать.

Шаг 2: выберите алфавит

Далее на странице есть возможность выбрать набор символов: латиница, кириллица и т. д. В зависимости от шрифта, в нем могут быть доступны не все варианты алфавита. Аналогично предыдущему пункту, лучше поставить галочку только напротив того алфавита, который понадобится.

Шаг 3: добавьте код на сайт

Далее Google предлагает подключить шрифт одним из нескольких способов: или стандартным, или через директиву @import , или с помощью JavaScript. Мы рассмотрим первые два варианта.

Первый способ подразумевает добавление в HTML-код ссылки на сервер Google, откуда и скачивается шрифт. Вам необходимо скопировать уже готовый кусок кода и поместить его между тегами в вашем HTML-документе. Пример:

Второй способ – подключение шрифта с помощью директивы @import . Готовый код находится во второй вкладке пункта 3 на странице выбранного Google-шрифта. Его нужно добавить в самое начало вашей таблицы стилей (в противном случае файл не импортируется). Выглядит код примерно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Особенность первого способа заключается в том, что вам понадобится добавлять ссылку на шрифт в заголовок каждой страницы, где планируется его использовать. Это легко осуществить на сайтах с небольшим количеством страниц, но проблематично для крупных ресурсов. Второй способ удобен тем, что код можно поместить в самое начало внешней таблицы стилей, и тогда все страницы, к которым подключена эта таблица, получат необходимый шрифт, который будет загружаться с помощью директивы @import .

Шаг 4: создайте стиль

После осуществления предыдущих шагов можно начать применять шрифт. Как записывается такое правило CSS, вы уже видели ранее:

Если на первом шаге вы выбрали несколько вариантов начертания (к примеру, добавили вариант жирного шрифта Bold 700), тогда на третьем шаге код немного видоизменится:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Чтобы затем придать шрифту жирное начертание, запишите CSS-стиль таким образом:

Примечание: в Google Fonts для обозначения насыщенности шрифта используются только условные единицы от 100 до 900. Так, нормальное начертание (по умолчанию) эквивалентно значению 400 (normal), а стандартное полужирное начертание эквивалентно 700 (bold).

Главными преимуществами сервиса Google Fonts является:

• легкость использования (разобраться с сервисом сможет даже новичок, а весь необходимый код генерируется автоматически – остается только скопировать его);
• доступность шрифтов (нет необходимости за них платить);
• предусмотрены все используемые форматы шрифтов (это означает, что каждый браузер сможет загрузить именно тот формат шрифта, с которым он работает).

Среди недостатков сервиса – не очень большое разнообразие шрифтов, особенно кириллических. К слову, в интернете есть и другие похожие сервисы, например, TypeKit (платный).

Итоги

Сегодня нам доступно несколько вариантов подключения оригинальных и нестандартных шрифтов к веб-страницам. Каждый из этих способов имеет свои плюсы и минусы. Какой из вариантов лучше использовать, вам нужно определить самостоятельно. Зачастую это зависит от ситуации, и в разных случаях могут пригодиться разные подходы. На данном этапе вам достаточно просто знать способы использования шрифтов в CSS.

Как подключить шрифт из google fonts в css

Главная СтатьиКак использовать Google Fonts и font-display
Поделиться в соцсетях:

Google Fonts — это бесплатная платформа с открытым исходным кодом, которая предлагает обширную библиотеку веб-шрифтов. Для веб-разработчика подключение этих шрифтов в свои проекты необходимо для создания визуально привлекательных дизайнов на различных устройствах.

Одним из важнейших аспектов эффективного использования Google Fonts является понимание CSS свойства font-display , которое определяет, как будет отображаться шрифт вашего сайта в процессе его загрузки. Другими словами, свойство указывает браузеру как долго он должен ждать загрузку шрифта и должен ли он перед этим отображать резервный встроенный шрифт. Используя свойство font-display , вы можете оптимизировать взаимодействие с пользователем, уменьшив влияние медленной загрузки шрифта на внешний вид и производительность вашего веб-сайта.

Как добавить Google Fonts в свой проект

Существует два основных метода добавления Google Fonts в ваш проект: ссылкой и импортом. Также их можно скачать и подключить в стилях с помощью правила @font-face .

Добавление шрифтов Google ссылкой

Это наиболее распространенный способ добавления шрифтов Google в ваш проект. Для этого выполните следующие действия:

1. Зайдите на сайт Google Fonts.
2. Выберите шрифт, который хотите использовать.
3. Кликните на шрифт, чтобы открыть страницу сведений о нем.
4. Выберите нужные стили и жирность шрифта.
5. Если панелька справа с выбранными опциями шрифта не появилась, нажмите иконку «Показать выбранное».
6. В выехавшей панели выберете опцию и вы увидите код для добавления шрифта.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; >

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=fallback');

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; font-display: fallback; >