Как подключить шрифт montserrat css

Веб-шрифты

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

Краткое повторение семейств шрифтов

Как мы рассматривали в Фундаментальной стилизации текста и шрифта, шрифты применённые к вашему HTML могут контролироваться при помощи свойства font-family . Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:

p  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; > 

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

Веб-шрифты

Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:

Во-первых, у вас есть блок @font-face в начале CSS, который указывает файл(-ы) шрифтов для загрузки:

@font-face  font-family: "myFont"; src: url("myFont.woff"); > 

Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:

html  font-family: "myFont", "Bitstream Vera Serif", serif; > 

Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.

Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:

1. Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
2. В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.

Примечание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!

Активное изучение: пример веб-шрифта

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

Вы должны использовать файлы web-font-start.html и web-font-start.css как отправную точку добавляя в них ваш код (см. живой пример). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле web-font-start.css вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.

Поиск шрифтов

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

• Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают Font Squirrel, dafont, и Everything Fonts.
• Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например fonts.com или myfonts.com. Также вы можете купить шрифты напрямую у производителя шрифтов, например Linotype, Monotype, или Exljbris.
• Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел Использование онлайн-сервиса шрифтов для более подробной информации.

Давайте найдём какие-нибудь шрифты! Отправляйтесь на Font Squirrel и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).

В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.

Примечание: В разделе «Find fonts» в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.

Генерация требуемого кода

Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.

1. Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
2. Перейдите на Fontsquirrel Webfont Generator.
3. Выгрузите два ваших файла шрифтов используя кнопку Upload Fonts.
4. Поставьте галочку отмеченную «Yes, the fonts I’m uploading are legally eligible for web embedding».
5. Кликните по Download your kit.

После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.

Реализация кода в вашем демо

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

• несколько версий каждого шрифта (например .ttf , .woff , .woff2 и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
• Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.
• Файл stylesheet.css , который содержит сгенерированный @font-face код который вам нужен.

Для внедрения их в ваше демо следуйте следующим шагам:

1. Переименуйте распакованную папку на что-нибудь лёгкое и простое, например fonts .
2. Откройте файл stylesheet.css и скопируйте содержимое обоих @font-face блоков в ваш файл web-font-start.css — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
3. Каждый из функций url() указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте fonts/ в начало каждого пути (настройте так как необходимо).
4. Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:

font-family: "zantrokeregular", serif; 

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

Примечание: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. web-font-finished.html и web-font-finished.css (run the finished example live).

Использование онлайн-сервиса шрифтов

Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании @font-face кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают Adobe Fonts и Cloud.typography. Большинство из этих услуг на основе подписки, за исключением Google Fonts, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.

Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии web-font-start.html и web-font-start.css в качестве отправной точки.

1. Отправляйтесь на Google Fonts.
2. Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
3. Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
4. Когда вы выбрали семейства шрифтов, нажмите на панель [Number] Families Selected в низу страницы.
5. На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.
6. Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.

Примечание: вы можете найти законченные версии google-font.html и google-font.css, если вам необходимо сверить вашу работу с нашей (см. live).

@font-face более детально

Давайте исследуем тот @font-face синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:

@font-face  font-family: "ciclefina"; src: url("fonts/cicle_fina-webfont.eot"); src: url("fonts/cicle_fina-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/cicle_fina-webfont.woff2") format("woff2"), url("fonts/cicle_fina-webfont.woff") format("woff"), url("fonts/cicle_fina-webfont.ttf") format("truetype"), url("fonts/cicle_fina-webfont.svg#ciclefina") format("svg"); font-weight: normal; font-style: normal; > 

Это называется «пуленепробиваемым @font-face синтаксисом», после публикации Пола Айриша (Paul Irish), с самого начала, когда @font-face начал получать популярность (Bulletproof @font-face Syntax). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:

• font-family : В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.
• src : В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS ( url путь) и формат каждого файла шрифта ( format часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.
• font-weight / font-style : В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения font-weight / font-style для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. @font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.

Примечание: вы также можете указать определённые значения font-variant (en-US) и font-stretch (en-US) для ваших веб-шрифтов. В новых браузерах вы также можете указать значение unicode-range (en-US), который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. Creating Custom Font Stacks with Unicode-Range от Drew McLellan предоставляет некоторые полезные идеи того как это использовать

Переменные шрифты

В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше Руководство по переменным шрифтам (en-US) .

Испытайте свои навыки!

Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. Задание: стилизация школьного сайта.

Заключение

Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».

Шрифт Montserrat: где используют и с чем сочетают

Рассказываем, для каких проектов подходит Montserrat, и показываем пять примеров шрифтовых пар.

Изображение: Ana Rita Silva / Behance

Полина Старцева
Всюду ищет великую красоту, работает над разумностью потребления.

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

Разберём одну из самых популярных гарнитур — Montserrat — и расскажем, с чем её сочетать.

Montserrat — что это за шрифт

Монсеррат — район в исторической части Буэнос-Айреса. В первой половине XX века здесь сложился особый стиль типографики на уличных указателях и вывесках — и именно на его основе аргентинка Джульета Улановски создала гарнитуру Montserrat. Набор шрифтов вышел в 2011 году и за короткое время стал одним из самых распространённых в мире. Позже, в 2017-м, Джульета с командой дизайнеров разработали кириллическую версию.

Фернандо Лаццари, режиссёр и коллега Улановски, снял визуальную поэму о связи архитектуры города и шрифта. Ролик длится всего две минуты и показывает, как буквы способны выражать дух места:

Montserrat очень часто встречается в digital-дизайне ― в лендингах и карточках для социальных сетей.

Montserrat в интерфейсе

Названия разделов на сайте оформлены Montserrat ― его легко читать даже по вертикали. Второй шрифт в дизайне — бесплатный Butler. У этой антиквы современный рисунок, поэтому digital-эксперименты с ней выглядят уместно: например, в этом интерфейсе названия проектов, набранные Butler, искривляются при наведении курсора.

Montserrat в фирменном стиле

Mogney ― проект сервиса оплаты по QR-кодам. В его айдентике дизайнеры использовали контрастную пару: брусковый Nixie One для лозунга и заголовков, Montserrat — для основного текста, разделов навигации и пояснений. Nixie One — бесплатный шрифт без кириллицы, и его рисунок сами создатели сравнивают со смесью курицы с ананасами или миксом неоновой вывески с печатной машинкой.

Montserrat в упаковке

Минималистичному дизайну уходовой косметики нужны простые шрифты без засечек, вызывающие ощущение, что эти средства серьёзные и им можно доверять. На чёрной матовой упаковке тексты набраны парой из Galano Grotesque и Montserrat. Они похожи: оба нейтральны, округлы и без контраста в штрихах. Благодаря этому дизайн остаётся чистым и не перегруженным смыслами.

Montserrat в плакате

Достоинство Montserrat ― то, что его легко читать, даже когда он мелкого размера. Montserrat оформлен объёмный текст в этом постере-объявлении об экскурсии. А броские заголовки и важная информация о датах — Bebas Neue в начертании Bold.

Montserrat в мерче

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

Где скачать Montserrat

Все шрифты гарнитуры Montserrat бесплатны и доступны для коммерческого использования согласно лицензии SIL Open Font License v1.10.

Скачать Montserrat с поддержкой кириллицы можно на многих ресурсах, например:

• Google Fonts,
• Fontstorage (в том числе вариативный шрифт),
• BestFonts.

Также Montserrat есть в библиотеке Adobe Fonts — значит, его можно активировать и установить во все программы, если у вас есть подписка Adobe Cloud.

Аналоги Montserrat

Заменить Montserrat на другой, подобный, шрифт несложно. Есть несколько похожих бесплатных гарнитур:

А если необходим платный шрифт, стоит выбрать гротеск Proxima Nova или Plain.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Читайте также:

• Шрифт Raleway: где используют и с чем сочетают
• Шрифтовые пары: 7 сервисов в помощь дизайнеру
• Что такое шрифтовые пары и как их подбирать
• Тренды в типографике — 2023

Как подключить шрифт Montserrat CSS

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

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

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

После того, как шрифт Montserrat успешно загружен, вы можете приступить к подключению его в CSS вашего сайта. Для этого вы можете использовать стандартные свойства CSS, такие как font-family , чтобы указать Montserrat в качестве предпочтительного шрифта для различных элементов вашего сайта.

Выбор и загрузка шрифта

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

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

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

1. Первым шагом является загрузка шрифта Montserrat с помощью подключения внешнего файлa CSS. Это можно сделать, вставив следующий код в раздел вашего HTML-документа:

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

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

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

selector 
font-family: "Название шрифта", sans-serif;
 
>

//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

//Добавляем к body или к нужному элементу font-family: 'Roboto', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

//Добавляем к body или к нужному элементу font-family: 'Ubuntu', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

//Добавляем к body или к нужному элементу font-family: 'Montserrat', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

//Добавляем к body или к нужному элементу font-family: 'Cuprum', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Cuprum:wght@400;700&display=swap');

//Добавляем к body или к нужному элементу font-family: 'Open Sans', sans-serif; font-family: 'Roboto', sans-serif; //Добавляем в   //Или добавляем в самый верх файла стилей css @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap');