Как использовать шрифты Google Fonts на вашем сайте
Ещё несколько лет назад web был полон скучными стандартными шрифтами, часть из них вообще не является читабельной. Это было сделано для того, что бы исключить отсутствие шрифтов на веб-страницах и привести всех к единому формату. Конечно же это нравилось не всем и стали появлятся подгружаемые шрифты, так же стали появляться сторонние сервисы, предоставляющие API для шрифтов. Но их стабильность и выбор самих шрифтов оставляли желать лучшего. Тем более встала проблема с лицензированием самих шрифтов. А некоторые сервисы, такие как Type Kit предоставляют такие услуги за деньги, к примеру $49-$99 за то, если вы хотите использовать шрифты более чем на одном сайте, тем более выбор даётся только из 230 шрифтов в бесплатной версии.
Но затем появился сервис Google Fonts, который легко и быстро предоставляет каждому пользователю выбор из 808 шрифтов, прямо со своих серверов. У этого сервиса огроменое количество преимуществ, таких как сам выбор шрифтов, это не просто подборка обыкновенных шрифтов — это подборка элегантных, читабельных и просто красивых шрифтов для вашего веб сайта.
Это ещё и уверенность в том, что эти шрифты всегда быстро загрузятся на страницу пользователя, как никак, а сервера о Google практически никогда не дают сбоев в работе. Выбор шрифтов действительно потрясающий и с каждым днем становится всё больше и больше. Зайдя на сам сайт, вы в этом убедитесь.
Но как и все шрифты, у них есть свои недостатки. Как известно не все из шрифтов поддерживают кириллицу и другие не латинские шрифты. А их довольно много, к примеру на некоторые языки, такие как арабский имеет всего 16 шрифтов из 808. Так что прежде, чем выбирать шрифт для своего сайта, убедитесь, что он поддерживает кириллицу. Сделать это можно довольно просто. Просто в боковой панели Google Fonts, выберите Languages и затем нажмите на Cyrillic. Таким образом вы исключите неприятные ситуации со шрифтами на вашем сайте. Сейчас доступно 68 шрифтов из 808, что довольно неплохой показатель. Но если вам требуются только латинские буквы, то смело убирайте фильтры, все шрифты поддерживаемые.
После того, как вы выбрали нужный шрифт. Нажмите на плюсик над ним и выберите его настройки. Вставить шрифт в страницу можно несколькими способами, прямо в HTML или через CSS. Для наглядного примера, мы выбрали кириллический шрифт Roboto Slab, он довольно популярный и довольно читабельный, так что это один из лучших выборов. Первым делом зайдите в Customize и выберите внутренние настройки — Cyrillic и Cyrillic Extended. По нужде можете выбрать размер жирности, но это можно изменить уже в самом CSS при разработке страницы и кстати рекоммендуется это делать там.
Далее мы видим довольно простой код CSS и HTML для вставки на сайт. Вы, как описано выше можете выбрать из 2х вариантов. Рассмотрим первый, прямая вставка кода на страницу HTML. В <head> сайта, вставьте код выданный Google Fonts, а затем на выбор, как вы любите пропишите в <style> для <body> font-family: ‘Roboto Slab’, serif;
Или же вы можете прописать стили inline, такой подход обычно используется для вставки шрифтов в HTML письма, но не часто из-за многих причин.
Второй вариант самый удобный и даёт больше возможностей для прямо работы с текстом. Просто пропишите font-family: ‘Roboto Slab’, serif; в любом CSS селекторе.
На данный момент Google Fonts бета версию собственных эффектов и возможностей работы со шрифтами посредством запросов и работы CSS. Но об этом мы напишем в других статьях по работе со шрифтами.
А пока наслаждайтесь уникальными и красивыми шрифтами от Google на страницах вашего сайта. Как видите в приминении их на страницах своего сайта нет ничего сложного, Google упростил сам процесс до минимума. А знания HTML и CSS требуют только основых знаний, что говорит о том, что сам процесс не займет у вас много врмени на изучения новых свойств и параметров.
ТОП-15 лучших дизайнерских шрифтов: самые крутые и популярные
Открытая лицензия.
ИсточникRaleway ― гротескный шрифт, то есть шрифт без засечек, который в 2010 году разработал дизайнер Мэтт Макинерни, он тогда создал первое начертание шрифтов.
Затем над Raleway работали еще несколько дизайнеров: Пабло Импаллари, Родриго Фуэнсалида в Иджинио Марини. Они добавили в семейство другие начертания, в том числе курсив. Сейчас этот шрифт поддерживает 318 языков, начертания на латинице и кириллице.
Где использовать: Лучше всего его использовать в заголовках, даже с большим кеглем в тексте он выглядит броско и интересно.
Открытая лицензия.
ИсточникFira Sans ― еще один гротескный шрифт без засечек, созданный немецким типографом Эриком Шпикерманом специально для Mozilla Firefox. Он был разработан для удобства чтения как на большом мониторе, так и на мобильных устройствах с разным качеством экранов.
ИсточникГде использовать: У шрифта множество начертаний различной жирности, что позволяет применять его как к заголовкам, так и к текстам.
Открытая лицензия.
ИсточникOpen Sans завоевал популярность за счет применения в плоском дизайне (его еще называют flat design, то есть дизайн без передачи объема).
Графический шрифт разработан Стивом Мэтисоном по заказу Google.
Где использовать: Open Sans по умолчанию используется в Mozilla Firefox, WordPress и Telegram. Так что если нужен популярный шрифт для веб-дизайна или сайтов, то присмотритесь к нему.
Открытая лицензия.
ИсточникUni Sans ― пример современного гротеска, с выраженным характером и геометрическим оттенком. Он смотрится дорого и профессионально, но чуть скругленные углы создают ощущение дружелюбия. Шрифт создан относительно недавно, в 2002 году, дизайнером Святославом Симовым и имеет 14 начертаний; из них бесплатно можно получить 4.
ИсточникГде использовать: Uni Sans используется для корпоративных проектов, телевидения, журналов, брендинга и упаковки.
Платная лицензия. Принадлежит компании Monotype.
ИсточникDIN Pro был разработан голландским типографом Альбертом-Яном Пулом в 2009 году. Гротескный шрифт без засечек, создание которого уходит корнями в немецкие стандарты, определенные еще в 1931 году.
У шрифта есть множество начертаний, функций, все знаки и почти все языки мира.
Где использовать: Встретить DIN Pro можно на упаковках, плакатах, вывесках, также он подходит для рекламы и брендинга.
Платная лицензия. Принадлежит компании Monotype.
ИсточникШрифт Avenir создан в 1988 году Адрианом Фрутигером, который вдохновлялся геометрическим гротеском 1920-х годов. Позже на его основе появился Avenir Next World — это расширенная версия семейства, которая поддерживает более 150 языков, включая латиницу, кириллицу, греческий, иврит, арабский, грузинский, армянский и тайский.
ИсточникГде использовать: В электронных и интерактивных материалах, приложениях, логотипах и полиграфии.
Условно открытая лицензия, можно использовать для личной работы. Полная лицензия принадлежит компании Apple.
ИсточникSan Francisco или просто SF разработан специально для Apple Watch в 2014 году. Поэтому он самый популярный среди брендовых шрифтов.
Создатели ориентировались на то, чтобы текст можно было читать в маленьком кегле, на маленьком экране. Также он внедрен в iOS/Mac. Подсемейства у них два: Text и Display. Шрифт современный и динамично меняет начертания в зависимости от контекста.
Где использовать: Для собственных, немонетизируемых проектов в digital-направлении.
Платная лицензия. Шрифт принадлежит компании Brownfox.
ИсточникGeometria ― гротескный шрифт, который поддерживает 72 языка. Он разработан в 2013 году Вячеславом Кириенко и Гаяне Багдасарян. В России встречается часто, так как его используют государственные учреждения, например музеи. Geometria отлично подходит для чтения большого количества текста.
ИсточникГде использовать: Geometria является одним из базовых веб-шрифтов, поэтому отлично подходит для сайтов.
Платная лицензия. Принадлежит компании Paratype.
ИсточникPragmatica ― отечественный шрифт, который разработан Владимиром Ефимовым в 1987 году для энциклопедий.
Позже его доработала Ольга Чаева, которая добавила еще 8 дополнительных начертаний. Pragmatica основана на шрифте Helvetica, поэтому не имеет засечек.
Где использовать: Используется для приложений, книг, журналов и рекламы.
Открытая лицензия.
ИсточникZona Pro создан греческим дизайнером Костасом Бартсокасом, который руководствовался геометрическими стилями 1920-х годов. В общей сложности у Zona Pro 16 начертаний, но бесплатны только несколько. Он поддерживает немного языков, но среди символов есть кириллица.
ИсточникГде использовать: Формы шрифта удобочитаемые и подходят для брендинга, заголовков и основного текста.
Свободное использование для личных и коммерческих целей. Принадлежит компании Pinspiry.
ИсточникAuch разработал турецкий дизайнер Мурат Юксель. Шрифт считается необычайно красивым и уникальным. В наборе есть спецсимволы и множество начертаний. Языков также много, поддерживает в том числе кириллицу.
Где использовать: Auch можно использовать в брендинге, на витринах и для заголовков.
Открытая лицензия.
ИсточникGaramond относится к классу антиква ― это типографские шрифты с засечками, которые появились еще в эпоху Возрождения. Вариантов этого шрифта много: есть классический, создание которого приписывают типографу Клоду Гарамонду в XVI веке, есть российская версия от Александра Тарбеева ― ITC Garamond, а есть версия для Apple ― Apple Garamond.
ИсточникГде использовать: Лучшее применение для Garamond ― приметные заголовки; еще его можно использовать в тех случаях, когда нужно создать чувство традиционности и неизменности.
Открытая лицензия.
ИсточникColus опирается на античные надписи и тексты, высеченные на камне. Относится к классу антиква. У шрифта много языков, он читаем как в заголовках, так и в текстовых блоках. Уникальность Colus в том, что он разработан в единственной форме, в одном стиле и с одними характеристиками, без наклонов и изменения толщин.
Где использовать: Шрифт подходит для обложек, журналов, заголовков и в любом дизайне в качестве акцента.
Условно открытая лицензия, можно использовать для личной работы. Принадлежит компании Fontfabric.
ИсточникAverta разработан тем же дизайнером, что и Zona Pro. Это изящный авторский шрифт, который имеет черты как американского, так и европейского гротеска. У него больше 40 начертаний, порядка 200 языков. Он постоянно обновляется и имеет два бесплатных начертания. Читается хорошо не только в заголовках, но и в тексте.
ИсточникГде использовать: Подходит как для электронного формата, так и для печатного.
Открытая лицензия.
ИсточникForum создал Денис Мошаров в 2011 году. Шрифт имеет античные, классические «римские» пропорции. В нем есть множество символов, знаков и языков, однако имеет он всего лишь одно начертание.
ИсточникГде использовать: Forum подходит для основного текста, заголовков и подзаголовков.
подмножеств шрифтов — латинские, кириллические и греческие шрифты
ОБРАТИТЕ ВНИМАНИЕ:
Описанные здесь специальные наборы шрифтов основаны на версии 5 шрифтов, а не на текущей версии. Они должны продолжать хорошо работать. В настоящее время мы не планируем предоставлять подмножества на основе версии 6, поскольку потребность в подмножествах шрифтов значительно уменьшилась благодаря современным шрифтам и технологиям браузеров. Если у вас есть особая потребность в обновлении любого из этих шрифтов до версии 6, пожалуйста, свяжитесь с нами и опишите вашу потребность.
Введение
Инициатива SIL по созданию нелатинских шрифтов создала комплексные шрифты для наборов символов латиницы и кириллицы. Charis SIL, Doulos SIL, Gentium Plus и Andika — это очень большие шрифты, которые охватывают почти все известные нам потребности в латинице и кириллице. Сейчас, когда мы вступаем в эпоху мобильных телефонов и Интернета, нам нужны маленькие и компактные шрифты.
Наши шрифты имеют размер более мегабайта каждый, и это считается слишком большим для использования с мобильным телефоном.
Текущие схемы подмножества коммерческих шрифтов удаляют информацию об интеллектуальном шрифте из шрифта при подмножении шрифта. Хотя это может быть приемлемо для большинства языков, мы считаем это неприемлемым, поскольку во многих языках мира требуется умное расположение диакритических знаков над и/или под базовыми символами. Теперь мы создали подмножества наших шрифтов для разных регионов мира. Эти шрифты содержат как смарт-код OpenType, так и Graphite. Каждый региональный шрифт содержит только те символы (и глифы), которые, как известно, используются в этом регионе мира. Мы попытались использовать наиболее распространенный глиф, необходимый для этого региона. Например, в Африке и некоторых частях Тихого океана наиболее распространенной формой для U+014A является большая форма маленькой ŋ (Ŋ), а в Европе, Евразии и Америке глиф для Ŋ чаще всего основан на «N ».
Наши пакеты подмножества шрифтов также содержат версии наших шрифтов в формате .woff. Они особенно полезны в контексте использования мобильных телефонов и Интернета. Дополнительную информацию об использовании шрифтов .woff можно найти здесь: Использование веб-шрифтов SIL на веб-страницах.
Загрузка
Наборы шрифтов можно загрузить с главной страницы загрузки. Загрузка содержит 64 шрифта; каждое региональное подмножество имеет восемь шрифтов. В загрузку включены шрифты .ttf и .woff.
Подмножества
За исключением фонетического шрифта [Phon] , подмножества шрифтов предназначены только для орфографического использования. Мы ничего не помещали в другие подмножества для фонетического использования, транслитерации или транскрипции. Для этих целей используйте фонетический шрифт [Phon] subset.
Наши региональные подмножества следующие:
- Африка [Afr] — Мы надеемся, что все языки Африки (использующие латиницу) охватываются этим шрифтом.
Americas [Am] — мы надеемся, что все языки в Северной и Южной Америке (использующие латиницу) охватываются этим шрифтом. Есть несколько вариантов глифов, которые здесь не представлены. Например, в некоторых языках Америки используется огонек в польском стиле, а в других — огонек в стиле Retrohook. На данный момент в нашем подмножестве используется огонек в польском стиле.
Asia/Pacific [APac] — этот шрифт включает поддержку латиницы для пиньинь, Папуа-Новой Гвинеи, Филиппин, языков Индии, Китая и Мьянмы, а также других стран, где языки (например, языки чин) пишутся латиницей. Есть несколько вариантов глифов, которые здесь не представлены. Например, в некоторых языках Папуа-Новой Гвинеи используется один стиль Ŋ, а в других языках используется другой стиль.
Неясно, что встречается чаще всего. На данный момент подмножество Азиатско-Тихоокеанского региона использует стиль заглавной буквы N. Мы можем изменить это, если узнаем, что другой стиль более распространен.Europe/Eurasia [Eur] — этот шрифт включает поддержку латиницы для Европы, Восточной Европы, Турции, Азербайджана, Казахстана, Кыргызстана и т. д. — всех языков в Европе и Евразии, использующих латиницу.
Vietnam [Viet] — этот шрифт включает поддержку латиницы для традиционного вьетнамского языка (включая диакритические знаки во вьетнамском стиле), а также несколько дополнительных символов, используемых языками меньшинств Вьетнама.
Phonetic [Phon] — этот шрифт предназначен для покрытия всего IPA, других фонетических символов, транслитерации и транскрипции. Чтобы различать U+0061 a и U+0251 ɑ, наши курсивные фонетические шрифты требуют, чтобы U+0061 a всегда был «двухэтажным a», а не «одноэтажным a».
Cyrillic (Basic) [Cyr] — этот шрифт содержит символы, используемые в кодовой странице 1251 (кириллица).
Он должен подходить для русского и других крупных языков, использующих кириллицу.Cyrillic Extended [CyrE] — этот шрифт содержит все символы кириллических блоков (за исключением некоторых исторических символов). Он должен подходить для современных языков большинства и меньшинств .
Он должен подходить для русского и других крупных языков, использующих кириллицу.Известные проблемы в подмножествах
U+0327 ОБЪЕДИНЕНИЕ CEDILLA и U+0328 ОБЪЕДИНЕНИЕ ОГОНЕК не всегда правильно позиционируются под некоторыми символами (такими как U+014A ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА ENG) в Graphite, но они позиционируются в OpenType. Как правило, это не должно быть проблемой, так как затронутые персонажи обычно не требуют седильи или огонека.
Альтернативная форма U+0306 COMBINING BREVE должна отображаться в кириллице, когда она сочетается с кириллическими символами. Альтернатива работает в OpenType, но не в Graphite.
В глифах для следующих символов отсутствует основа «O» или «U» в Charis SIL Bold Italic:
- U+1EDA ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА O С РОГОМ И ОСТРОЙ
- U+1EDC ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА O С РОГОМ И ГРАВОЙ
- U+1EDE ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА O С РОГОМ И КРЮЧКОМ НАД
- U+1EE0 ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА O С РОГОМ И ТИЛЬДОЙ
- U+1EE2 ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА O С РОГОМ И ТОЧКОЙ НИЖЕ
- U+1EE8 ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА U С РОГОМ И ОСТРОЙ
- U+1EEC ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА U С РОГОМ И КРЮЧКОМ НАД
- U+1EEE ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА U С РОГОМ И ТИЛЬДОЙ
- U+1EF0 ЛАТИНСКАЯ ЗАГЛАВНАЯ БУКВА U С РОГОМ И ТОЧКОЙ НИЖЕ
- В глифах для следующих символов отсутствует основа «U» в Charis SIL Italic:
- U+1EE9 ЛАТИНСКАЯ СТРОЧНАЯ БУКВА U С РОГОМ И ОСТРОЙ
- U+1EEB СТРОЧНАЯ ЛАТИНСКАЯ БУКВА U С РОГОМ И ГРАВОЙ
- U+1EED СТРОЧНАЯ ЛАТИНСКАЯ БУКВА U С РОГОМ И КРЮЧКОМ НАД
- U+1EEF СТРОЧНАЯ ЛАТИНСКАЯ БУКВА U С РОГОМ И ТИЛЬДОЙ
- U+1EF1 СТРОЧНАЯ ЛАТИНСКАЯ БУКВА U С РОГОМ И ТОЧКОЙ НИЖЕ
Квадратов вместо кириллицы на разных сайтах | Форум поддержки Firefox
Эта тема была заархивирована.
Пожалуйста, задайте новый вопрос, если вам нужна помощь.
я вижу квадраты там где обычно и в последнее время стоят русские буквы. В сафари такого нет.
Заранее спасибо!
Вижу квадраты там где обычно и в последнее время стоят русские буквы. В сафари такого нет. Заранее спасибо!
Прикрепленные скриншоты
Выбранное решение
Все ответы (3)
ФредМакД
Эти квадраты — это шрифты, которые не отображаются должным образом.
[v56+] Введите about:preferences#general
Убедитесь, что вы не включили тему высокой контрастности в настройках ОС.
- Мы видели сообщения о том, что это может быть вызвано проблемой со шрифтами, такими как Roboto или Helvetica, которые
вы установили локально, и это может быть повреждено или отсутствуют некоторые варианты. Кроме того, сделать Убедитесь, что вы разрешаете страницам выбирать свои собственные шрифты и что вы не блокируете удаленные (загружаемые) шрифты.
- https://support.mozilla.org/questions/1325619 Странный шрифт на некоторых сайтах
- Если вы используете uBlock Origin, убедитесь, что вы не «блокируете удаленные шрифты».
- 10 ведущих участников
- Модератор
Выбранное решение
Вы можете щелкнуть правой кнопкой мыши и выбрать «Проверить», чтобы открыть встроенный инспектор с выбранным элементом.
- https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
Вы можете проверить на вкладке
