Шрифты гугла для сайта: 20 Лучших веб-шрифтов от Google Web

Список шрифтов, которые вы можете использовать, см. Google шрифты.

Указание семейств и стилей шрифтов в URL-адресе таблицы стилей

Чтобы определить, какой URL использовать в ссылке на таблицу стилей, начните с Google Базовый URL Fonts API:

https://fonts.googleapis.com/css
 

Затем добавьте параметр URL-адреса family = с одним или несколькими именами семейств шрифтов и стили.

Например, чтобы запросить Шрифт Inconsolata:

https://fonts.googleapis.com/css?family=Inconsolata
 

Чтобы запросить несколько семейств шрифтов, разделите имена вертикальной чертой ( | ).

Например, чтобы запросить шрифты Мандарин, Инконсолата и Droid Sans:

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
 

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

API Google Fonts предоставляет обычную версию запрошенных шрифтов от дефолт. Чтобы запросить другие стили или веса, добавьте двоеточие (: ) к имени шрифт, за которым следует список стилей или начертаний, разделенных запятыми (, ).

Например:

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
 

Чтобы узнать, какие стили и веса доступны для данного шрифта, см. список шрифтов в Google Fonts.

Для каждого запрашиваемого стиля вы можете указать полное название или Сокращенное название; в качестве альтернативы можно указать числовой вес:

Например, чтобы запросить курсив Cantarell и жирный шрифт Droid Serif, вы можете использовать любой из следующих URL-адресов:

https: // шрифты.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
 

Использовать font-display

font-display позволяет управлять что происходит, пока шрифт недоступен. Обычно уместно указывать значение, отличное от значения по умолчанию auto .

Передайте желаемое значение в строке запроса отобразите параметр :

https: // шрифты.googleapis.com/css?family=Roboto&display=swap
 

Указание подмножеств сценариев

Некоторые шрифты в каталоге шрифтов Google поддержка нескольких скриптов (например, латиницы, кириллицы и греческого языка). В целях чтобы указать, какие подмножества должны быть загружены, параметр подмножества должен быть добавлен к URL-адресу.

Например, чтобы запросить подмножество кириллицы в Шрифт Roboto Mono, URL будет:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
 

Для запроса греческого подмножества Шрифт Roboto Mono, URL будет:

https: // шрифты.googleapis.com/css?family=Roboto+Mono&subset=greek
 

Для запроса греческой и кириллической подмножеств Шрифт Roboto Mono, URL будет:

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,кирилловый
 

Латинское подмножество всегда включается, если доступно, и его не нужно указывать. Обратите внимание: если клиентский браузер поддерживает диапазон Unicode (http://caniuse.com/#feat=font-unicode-range) параметр подмножества игнорируется; браузер выберет из подмножеств поддерживается шрифтом, чтобы получить то, что необходимо для визуализации текста.

Полный список доступных шрифтов и их подмножеств см. Google шрифты.

Оптимизация запросов шрифтов

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

В этих случаях вам следует подумать о том, чтобы указать в шрифте значение текст = . URL-адрес запроса. Это позволяет Google возвращать файл шрифта, оптимизированный для вашего запрос.В некоторых случаях это может уменьшить размер файла шрифта до 90%.

Чтобы использовать эту функцию, просто добавьте text = в свой Google Fonts API. Запросы. Например, если вы используете Inconsolata только для названия своего blog, вы можете поставить само название как значение text = . Вот что запрос будет выглядеть так:

https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
 

Как и все строки запроса, вы должны кодировать URL-адресом значение:

https: // шрифты.googleapis.com/css?family=Inconsolata&text=Hello%20World
 

Эта функция также работает для международных шрифтов, позволяя указать UTF-8. персонажи. Например, ¡Hola! представлен как:

https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
 

Включение эффектов шрифта (бета)

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

Это эффект шрифта!

Чтобы использовать эту бета-функцию, просто добавьте effect = в свой Google Запрос Fonts API и добавление соответствующего имени класса в элемент (ы) HTML на что вы хотите повлиять. В нашем примере выше мы использовали теневое кратное эффект шрифта, поэтому запрос будет выглядеть так:

https: // шрифты.googleapis.com/css?family=Rancho&effect=shadow-multiple
 

Чтобы использовать эффект, добавьте соответствующее имя класса к своим элементам HTML. В соответствующее имя класса всегда является именем эффекта с префиксом font-effect- , поэтому имя класса для shadow-multiple будет font-effect-shadow-multiple :

 Это эффект шрифта! 

 

Вы можете запросить несколько эффектов, разделив имена эффектов вертикальной чертой. персонаж ( | ).

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
 

Вот полный список всех эффектов шрифтов, которые мы предлагаем:

Есть много других способов стилизовать ваши шрифты, и многие вещи возможны через CSS. Мы просто предлагаем вам несколько идей для начала. Для большего идеи, попробуйте поискать в Google «текстовые эффекты css» и просмотрите многие идеи, которые уже есть в сети!

Дополнительная литература

Как выбрать шрифты для вашего бизнеса

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

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

Что такое шрифты Google?

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

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

Как выбрать шрифты Google

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

1. Читаемость

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

2. Цель

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

3. Лучшие комбинации шрифтов Google

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

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

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

4. Используйте популярные шрифты

Имея более 900 шрифтов, вы можете подумать, что любой из них может работать в любом случае.Однако большинство дизайнеров часто прибегают к тому же небольшому количеству шрифтов, которые хорошо подходят для большинства дизайнов. Например, при создании булавок в Pinterest я заметил, что шрифт Google Playfair Display хорошо работает при привлекательных кликах, когда он выделен курсивом. Я пробовал несколько других шрифтов на платформе, но мои самые эффективные пины всегда берутся из того же шрифта Google. По мере накопления опыта вы тоже начнете выбирать несколько лучших шрифтов. Можно часто использовать одни и те же шрифты Google. Если это сработает, не бойтесь использовать его и дальше.

5. Дайте волю своей интуиции

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

Почему шрифты Google важны

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

Более 50 шрифтов Google для использования в 2021 году

Лучшие шрифты Google

1. Roboto
2. Open Sans
3. Lato
4. Oswald
5. Slabo 27 px
6. Roboto Condensed
7. Montserrat
8. Source Sans Pro
9. Raleway
10. ПТ Санс

Список шрифтов Google

В настоящее время существует 923 шрифта Google.Вот несколько из списка шрифтов Google:

1. Playfair Display
2. Bitter
3. Libre Baskerville
4. Archivo Narrow
5. Alegreya Sans
6. Ubuntu
7. Crimson Text
8. Heebo
9. Cabin
10. Lobster
    430

Бесплатные шрифты Google

1. Pacifico
2. Abril Fatface
3. Barlow
4. Bree Serif
5. Bonbon
6. Ropa Sans
7. Amiri
8. Orbitron
9. Zilla Slab
10. Great Vibes

Лучший шрифт для веб-сайта

1. Дисплей Playfair
2. Cantata One
3. Roboto Slab
4. Cardo
5. Montserrat
6. Poppins
7. Merriweather
8. Lora
9. Domine
10. Karla

Google Fonts с лучшими засечками

1. Roboto Slab
2. Crimson Text
3. Slabo 27px
4. EB Garamond
5. Amiri
6. Neuton
7. Zilla Slab
8. Josefin Slab
9. Unna
10. 9050 Abhaya Libre

Best Sans Serif Google Fonts

1. Roboto
2. Ubuntu
3. Rubik
4. Cabin
5. Heebo
6. Notable
7. Barlow
8. Archivo Narrow
9. Asap
10. Ropa Sans

Лучшие шрифты Google Рукописный ввод

1. Indie Flower
2. Pacifico
3. Shadows Into Light
4. Bonbon
5. Amatic SC
6. Great Vibes
7. Architects Daughter
8. Nothing You Could Do
9. Reenie Franc Beanie
10. Sisco30 Sue Ellen

Отображение лучших шрифтов Google

1. Squada One
2. Bahianiata
3. Barriecito
4. Горы Рождества
5. Lobster
6. Abril Fatface
7. Righteous
8. Comfortaa
9. Geostar
10. Patua One

Лучшие шрифты Google Monospace

1. Roboto Mono
2. Inconsolata
3. Source Code Pro
4. Cousine
5. PT Mono
6. Nanum Gothic Coding
7. Space Mono
8. Anonymous Pro
9. Cutive Mono
29 Oxygen9

Google Fonts для Android

1. Literata
2. Lato
3. Montserrat
4. Open Sans
5. Raleway
6. Oswald
7. Merriweather
8. Poppins
9. Roboto Slab
10. Playfair Display

Лучшие шрифты Google для логотипов

1. Karla
2. Work Sans
3. Oswald
4. Roboto
5. Rubik
6. Poppins
7. Cabin
8. Montserrat
9. Chivo
10. Lato

Лучшие веб-шрифты Google

1. Cutive Mono
2. Cabin
3. Bitter
4. Arvo
5. Anton
6. Notable
7. Fjalla One
8. Mukta
9. Varela Round
10. Darker Grotesque

Лучшее семейство шрифтов для веб-сайтов

1. Montserrat
2. Raleway
3. Roboto
4. Poppins
5. Libre Franklin
6. Source Sans Pro
7. Muli
8. Barlow
9. Exo
10. Overpass

Google Fonts Shopify

1. Abril Fatface
2. Pacifico
3. Rancho
4. Sansita One
5. Inconsolata
6. Anonymous Pro
7. Fira Sans
8. Lato
9. Istok Web
10. Bitter

    0

Google Fonts WordPress

1. Prompt
2. Rokkitt
3. Courgette
4. Alegreya
5. Old Standard TT
6. Cardo
7. Zilla Slab
8. Pathway Gothic One
9. Cantarell
10. Nanum Myeongjo

Лучшие комбинации шрифтов Google

1. Vast Shadow — Playfair Display
2. Montserrat — Droid Serif
3. Oswald — Roboto
4. Lato — Merriweather
5. Raleway — Roboto Mono
6. Abel — Ubuntu
7. Proza Libre — Open Sans Rubik — Karla
8. Bree Serif — Lora
9. Poppins — Anonymous Pro

Как скачать шрифты Google

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

2. Далее откройте всплывающее окно внизу экрана

3. Щелкните стрелку вниз (значок загрузки)

4. Нажмите «Загрузить»

5. Будет загружен zip-файл

6. Откройте файл и щелкните первый шрифт

7. Вручную установите каждый шрифт в папку

Как установить шрифт Google на свой веб-сайт

Вы можете установить любой шрифт Google, который в настоящее время не установлен на вашем веб-сайте.Один из самых простых способов сделать это — установить платное приложение Shopify в вашем магазине. Например, приложение Fontify by Nitro позволяет установить любой шрифт на свой веб-сайт, не зная, как кодировать.

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

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

Генераторы шрифтов Google

1. Canva

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

2. Font Pair

Font Pair Генератор шрифтов Google поможет вам найти пары шрифтов для вашего веб-сайта или других форм содержания. Комплексный веб-сайт сосредоточен на шрифтах, основанных на разных семействах шрифтов. Например, вы можете найти комбинации шрифтов san serif и serif или комбинации шрифтов display и serif. Поэтому, если вы хотите сопоставить два определенных семейства шрифтов, этот генератор шрифтов Google сделает свое дело.

3. Fontjoy

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

4. Аналитика

Аналитика может не быть генератором шрифтов Google в традиционном понимании. Тем не менее, он знакомит вас с самыми популярными шрифтами Google. Если вы хотите использовать самые популярные веб-шрифты, вы быстро поймете, что Roboto находится в верхней части списка. В психологии есть так называемый простой эффект воздействия, который означает, что людям нравятся вещи, которые им наиболее знакомы. Придерживаясь лучших веб-шрифтов Google, люди «теоретически» предпочтут тот шрифт, который они видят.

Заключение

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

Какие шрифты Google Fonts вы используете в своем интернет-магазине? Комментарий ниже!

Хотите узнать больше?

Лучшие веб-шрифты Google: взгляд дизайнера

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

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

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

Что такое шрифты Google и зачем они нужны?

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

Есть ряд заманчивых причин использовать Google Fonts.

1. Надежно и проверено.
2. Поскольку они бесплатны, вам не нужно платить за использование шрифта на своем сайте.Это может сэкономить вам много денег по сравнению с коммерческими шрифтами, которые требуют единовременной платы, цены в год или даже платы в зависимости от вашего трафика.
3. Если шрифт, который использует ваш бренд, имеет подписку на использование в Интернете, которую ваша компания не может себе позволить, вы часто можете найти аналогичные альтернативы в Google Fonts.
4. Поскольку Google сообщает вам, как ваш выбор влияет на скорость, он побуждает вас делать правильный выбор. Вы не хотите использовать все шрифты на своем сайте, да и не должны.Но никто не скажет вам иначе, и их можно легко загрузить, не задумываясь!
5. Экспериментировать проще. Если ваш стартап еще не определился со шрифтами, Google Fonts может отлично подойти для тестирования комбинаций. Вам не нужно брать на себя обязательства, и вы можете легко поменять его, если передумаете.

Шрифты Google и скорость загрузки страниц: что нужно знать

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

1. Загрузите только абсолютное минимальное количество шрифтов и толщины, которое вам нужно.
2. Загрузите шрифты и толщину за один вызов. Google позволяет перечислить сразу несколько шрифтов, разделенных вертикальной линией (|). Если вы загружаете каждый отдельный сценарий импорта, это создает больше работы для сервера, поскольку он загружает их по одному.
3. Сценарий импорта Google блокирует рендеринг. Это означает, что остальная часть страницы блокируется от загрузки до загрузки шрифтов. Загрузка шрифта с помощью Javascript из нижнего колонтитула вашей страницы вместо заголовка поможет, но есть и лучшие альтернативы.Для достижения наилучших результатов используйте Web Font Loader или плагин WordPress, например Easy Google Fonts или TK Google Fonts.

Сколько шрифтов подходит?

Избегайте выбора более трех шрифтов. Обычно достаточно одного шрифта для заголовков и одного шрифта для текста, и это правило применимо и к печатным материалам. Браузеры могут неплохо отображать курсив и жирный шрифт без необходимости их загрузки. К сожалению, это не всегда так; некоторые шрифты вы захотите загрузить «черным» или «жирным» жирным шрифтом, чтобы использовать их на месте.

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

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

Лучшие шрифты Google

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

Лучшие шрифты без засечек

---

Нравится Myriad? Тогда вам понравится его бесплатный доппельгангер Source Sans Pro с широким выбором веса и отличной читаемостью при любом размере. Поскольку он используется более чем на четырех миллионах сайтов, он должен быть хорошим.


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


Доступный в различных стилях и весах, Lato придает современный, дружелюбный вид тексту любого размера. Неудивительно, что его используют восемь миллионов сайтов!


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


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

Лучшие шрифты с засечками

---


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


Отличный шрифт основного текста с некоторым привкусом старого мира, Alegreya имеет красивые жирные версии для заголовков и представлен на более чем 250 000 веб-сайтов.


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


Этот шрифт с плоскими засечками великолепен сам по себе, но также может использоваться вместе с его расширенным семейством, которое включает Roboto (базовый вариант без засечек), Roboto Condensed и Roboto Mono. Хотя Robot Slab не используется так часто, как Merriweather, он также является хорошим выбором для других стран.


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

Лучшие декоративные и специальные шрифты

---


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


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


Идеальное название для этого шрифта, смягчающего жесткую графику за счет более повседневного и женственного почерка. Если вы ищете нестандартный вариант, Architects Daughter — это наименее используемый шрифт в нашем списке.


Множество лигатур и альтернативных символов делают Lobster красивым, жирным и забавным шрифтом.


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

Комбинации шрифтов: что работает

---

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

Lobster выделен жирным шрифтом и отчетливо, что придает заголовку красивый курсивный курс. Source Sans Pro поддерживает его, будучи нейтральным шрифтом без засечек, позволяя отличительному вкусу Lobster делать тяжелую работу.

Лато поддерживает классический авторитет Мерривезера, не мешая ему.

Использование самого тяжелого веса для Poppins в качестве заголовка и более легкого веса для Roboto Slab создает вид, который выглядит одновременно современным и дружелюбным.

Обычно мы не можем сочетать два шрифта с засечками вместе, но использование Abril Fatface в качестве большого и жирного заголовка все же может эффективно контрастировать с более легким и последовательным видом Alegrey.

Architects Daughter делает заголовок забавным, вычурным, но Open Sans сохраняет основной текст разборчивым — именно таким, каким он должен быть.

Для получения дополнительных идей по сочетанию шрифтов у fontpair.io есть собственный список рекомендаций или используйте font-combiner.com для смешивания и сопоставления в реальном времени. Google также внесет свои предложения.

Шрифты за пределами Google

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

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

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

Если бюджет не расписан, вы, вероятно, сможете найти что-то довольно близкое к нему бесплатно в Google Fonts. А для тех проектов, которые не требуют такой тонкости, вы можете быть уверены, что Google будет рядом, чтобы быстро собрать что-то презентабельное.

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

лучших комбинаций шрифтов Google для современного веб-сайта

Дизайн

Дело с выбором шрифтов…

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

Это определенно непростая задача. Даже для тех, кто занимается дизайном.

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

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

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

Я приготовил для вас 10 безотказных комбинаций, которые работают .

Надежные комбинации

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

Во всех комбинациях используются шрифты Google. И они демонстрируют один шрифт для заголовков (отмечен как H) и другой для основного текста (отмечен как B).

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

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

Эксклюзивный бонус: Загрузите «7 способов сделать свой веб-сайт профессиональным». И повысьте доверие к своему сайту!

Как использовать эти комбинации

→ Если вы используете одну из наших тем WordPress, все, что вам нужно сделать, это перейти в Параметры темы »Типографика на панели инструментов WordPress.

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

→ Если вы не используете одну из наших тем или создаете код для веб-сайта, вам необходимо выполнить два шага:

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

Шаг 2 : Объявите шрифты, которые будут использоваться для текста и заголовков в ваших стилях.css файл.

Вы найдете код встраивания и код CSS под каждой комбинацией, так что вы можете скопировать и вставить их в свои файлы.

Еще кое-что, прежде чем мы начнем

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

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

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

---

---

1. Crimson Text + Work Sans

Если вы ищете элитный стиль, внешний вид, который сделает ваш веб-сайт престижным и современным, эта комбинация для вас.

Crimson Text — шрифт с засечками, вдохновленный шрифтами старого стиля — для заголовков, в сочетании с Work Sans — современным гротескным шрифтом без засечек — для основного текста, представляют собой прочное сочетание традиций и современности.

* Посмотрите на эту комбинацию шрифтов и цветов в действии на этом готовом сайте от Artisan Themes: Blue Agency.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Work Sans", без засечек;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Малиновый текст», с засечками;
} 

Цвета

Цвет фона: # 0057ff
Цвет текста: #ffffff

2. Освальд + Кардо

Комбинация с высокой контрастностью, которая наверняка повлияет на посетителей вашего сайта.

Это Освальд + Кардо. Сжатый шрифт без засечек с заглавными буквами для заголовков и классический шрифт с засечками для основного текста.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Cardo', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Освальд», без засечек;
 преобразование текста: прописные буквы;
} 

Цвета

Цвет фона: # 484d5c
Цвет заголовка: # ffce00
Цвет корпуса: # c0ccd4

3.Зыбучие пески (средний + светлый)

Иногда достаточно одного шрифта, чтобы ваш дизайн стоял на месте. Это один из тех моментов.

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

Quicksand — это геометрический дисплей без засечек с закругленными концами, что делает его удобным и приятным шрифтом.

Используйте его с яркими цветами, и вы получите этот современный резкий вид.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Зыбучие пески», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 font-weight: 500;
} 

Цвета

Цвет фона: # ff0d7b
Цвет текста: #ffffff

4. Archivo Black + Judson

Прочный, смелый с оттенком элегантности. Знакомьтесь: Archivo Black + Judson.

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

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Judson', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: «Archivo Black», без засечек;
} 

Цвета

Цвет фона: # 674b7c
Цвет текста: # f47362

5. Абрил Fatface + Робото

Abril Fatface и Roboto составляют модную и шикарную комбинацию.

По словам авторов Абрил Fatface: «Тонкие засечки и четкие кривые придают шрифту изысканный вид, который придает элегантный вид любому заголовку».

Робото входит, чтобы уравновесить личность Абрил. Достижение стильного и современного баланса.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Робото», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Abril Fatface', serif;
} 

Цвета

Цвет фона: # ff3627
Цвет текста: #ffffff

6.Archivo + Open Sans

Яркий, яркий, блестящий. Сочетание шрифтов для молодых и веселых брендов.

Используйте Archivo (вес 500) для заголовков, Open Sans (вес 300) для тела и ta-da …! Вы готовы к работе.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: «Open Sans», без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Archivo', без засечек;
 font-weight: 500;
} 

Цвета

Цвет фона: # 864aff
Цвет заголовка: # 00fdcb
Цвет корпуса: #ffffff

7.Монтсеррат + Work Sans

Смелый, жирный, жирный, геометрический, жирный… и дружелюбный. Если это то, что вам нужно, попробуйте эту комбинацию.

Нечего и говорить о Montserrat, одном из самых красивых и надежных шрифтов в коллекции Google Fonts.

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

Здесь мы видим его самую сильную и толстую сторону, но он также может использоваться в шикарных и более изысканных стилях (предупреждение о спойлере: комбинация номер 9).

Объедините его с Work Sans (облегченная версия), шрифтом, который я лично полюбил последние месяцы, и вам не о чем будет беспокоиться. Вроде в жизни. Они такие могущественные.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Work Sans", без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 font-weight: 900;
} 

Цвета

Цвет фона: # b7e3e4
Цвет текста: # f03f35

8.Прата + Лато

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

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

* Посмотрите, как работает эта комбинация в этой бесплатной теме WordPress под названием Pepper.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Lato', без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Prata', serif;
} 

Цвета

Цвет фона: # 5b1ee1
Цвет текста: #ffffff

9. Монтсеррат + Лора

Помните, я сказал, что Монсеррат может служить разным стилям и целям? Вот доказательство.

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

Объедините его с чистыми засечками, такими как Lora, и палитрой розового или розового золота, и bum , у вас есть веб-сайт в женском стиле для индивидуального предпринимателя или современного бренда, которым управляет женщина.

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: 'Lora', serif;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Montserrat', без засечек;
 font-weight: 300;
 преобразование текста: прописные буквы;
} 

Цвета

Цвет фона: # fce1e0
Цвет текста: # 000000

10.Дисплей Playfair + Chivo

Роскошно и модно. Такого статуса вы можете достичь с помощью этой комбинации.

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

Элегантность и тонкие штрихи

Chivo, использованные в Light, делают его идеальным для сочетания с сильными характеристиками Playfair Display.

Что вы ждете, чтобы попробовать?

Шрифты

Код для вставки:

Код CSS:

 body {
 семейство шрифтов: "Chivo", без засечек;
 font-weight: 300;
}

h2, h3, h4, h5, h5, h6 {
 семейство шрифтов: 'Playfair Display', serif;
 font-weight: 700;
 стиль шрифта: курсив;
} 

Цвета

Цвет фона: # 000000
Цвет текста: #ffffff

---

Надеюсь, эти комбинации вам пригодятся! Я уверен, что вы держите здесь пару любимых под рукой.

Ищете дополнительные советы по дизайну для создания собственного веб-сайта? Продолжайте читать здесь: 11 основных советов для не-дизайнеров, создающих веб-сайт

17 лучших шрифтов Google на 2021 год (и как их использовать в WordPress)

Вы готовы обновить свой сайт WordPress, но не можете решить, какой шрифт выбрать? Их просто так много. Как вы должны знать, какие шрифты Google лучше всего подходят для вашего сайта? Тем более, что выбор шрифтов имеет реальные последствия для успеха вашего сайта.

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

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

Вот 17 самых популярных шрифтов Google (2021)

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

1. Робото

Rockin ’Roboto — звезда, которая упивается тем, что является самым популярным шрифтом с рекордным количеством почти 60 миллиардов использований. Он наиболее популярен в США, но широко используется от Японии до Бразилии. Roboto был создан специально, чтобы быть лучшим из обоих миров с сильными, чистыми линиями, но мягкими и дружелюбными изгибами. Google предлагает Open Sans, Lato, Montserrat, Raleway и Oswald в качестве популярных пар для Roboto.

2. Open Sans

Outgoing Open Sans здесь для удобства чтения. Это нейтральный шрифт, который понравится всем и доступен как для мобильных платформ, так и для печати. Open Sans любит пользоваться почти 30 миллиардами пользователей в США, Франции и России. Его популярные пары — Roboto, Lato, Oswald, Raleway и Montserrat.

3. Лато

Lively Lato — это шрифт, не предназначенный для бизнеса, без засечек — у него есть своя работа.Его углы точные, чистые и острые, что делает его профессиональным заявлением для почти 10 миллиардов пользователей от США до Бразилии. Его пары Google: Roboto, Open Sans, Oswald, Raleway и Source Sans Pro.

4. Монсеррат

Запоминающийся Монсеррат стремится оставаться уникальным, как и его одноименный район в Буэнос-Айресе, Аргентина. Это профессионально, но не из соображений жесткости — ему нравится быть доступным для более чем 5 миллиардов пользователей от США до Франции и Бразилии.Популярные комбинации с этим шрифтом: Raleway, Open Sans, Roboto, Oswald и Lato.

5. Roboto Condensed

Возвращение Робото, на этот раз в его «сжатой» форме. Семейство шрифтов Roboto большое, и это более тонкий брат по сравнению с нашим предыдущим примером. Он был разработан для тех, кому нужно сэкономить место и максимально использовать комнату на своем веб-сайте. Этой версией пользуются более 4 миллиардов человек, и она наиболее популярна в США и России. Популярные пары — Open Sans, Lato, Oswald, Montserrat и обычный Roboto.

6. Source Sans Pro

Superb Source Sans Pro — энергичный человек и серьезно относится к своей работе. Adobe разработала его так, чтобы он хорошо работал с пользовательскими интерфейсами, а Source Sans Pro — это шрифт для этой задачи — почти 4 миллиарда человек используют его в США и Франции. Он хорошо сочетается с Open Sans, Roboto, Lato, Oswald и Raleway.

7. Освальд

Ornate Oswald является правильным и любит вписываться в пиксельную сетку стандартных цифровых экранов. Освальду нравятся вещи определенным образом, поскольку им свободно пользуются на интернет-платформах почти 4 миллиарда человек, особенно в США и Франции.Чаще всего он сочетается с нашими регулярно появляющимися Open Sans, Roboto, Lato, Montserrat и Raleway.

8. Raleway

Refined Raleway готов раскрасить город и живет в стиле ар-деко. Raleway привносит элегантный, но смелый вид на любой веб-сайт. Первоначально он задумывался как заголовок с одним стилем, но теперь он может похвастаться 18 стилями и почти 3 миллиардами людей, которые его используют. Он регулярно появляется вместе с Montserrat, Open Sans, Roboto, Lato и Oswald.

9. Slabo 27px / 13px

Specialized Slabo 27px / 13px наиболее удобен в технической атмосфере, такой как отчет, распечатанный в научной лаборатории. Несмотря на то, что у него есть засечки, он по-прежнему выглядит более тонким и эффективным, и его используют более 2 миллиардов человек в США, Индонезии, Индии и Бразилии. Популярные пары — Roboto, Lato, Open Sans, Montserrat и Oswald.

10. PT Sans

Рядовой П. Т. Санс — интроверт, ставший экстравертом. Впервые он был разработан для проекта «Общественные типы Российской Федерации», чтобы помочь жителям России читать и писать на своих родных языках.К настоящему времени люди используют его во всем мире, хотя он по-прежнему остается самым популярным в России, где его используют менее 2 миллиардов человек. Однако пользователям в Турции и США это тоже нравится. Open Sans, Roboto, Lato, Raleway и PT Serif — отличные помощники для этого шрифта.

11. Мерриуэзер

Merry Merriweather — открытая книга с удобным для чтения стилем для любого экрана. Это шрифт для людей с интересными небольшими диагоналями, открытыми закругленными формами и сильными засечками. Менее 2 миллиардов человек используют его в основном в США, а также в Италии и Бразилии.Его популярные пары — Open Sans, Montserrat, Oswald, Lato и Roboto.

12. Робото-плита

Relaxed Roboto Slab — крутой родственник обычного Roboto, несущий в себе чувство чутья. Он отличается от обычного Roboto своим уникальным стилем и не заботится об экономии места так, как Roboto Condensed, потому что он слишком сосредоточен на самовыражении. Менее 2 миллиардов человек используют Roboto Slab в США, России, Италии и Бразилии, и он хорошо сочетается с обычными Roboto, Open Sans, Monserrat, Lato и Raleway.

13. Noto Sans / Serif

Neighborly Noto Sans — это интернациональный шрифт — он наслаждается разными культурами, так как он был предназначен для совместимости с несколькими языками. Им пользуются более 1,5 миллиарда человек, в основном из США и Бразилии. Noto Sans любит подружиться с Noto Serif, Open Sans, Inconsolata, Roboto и Source Sans Pro.

14. Open Sans Condensed

Optimal Open Sans Condensed — не завистливый шрифт, но он чувствовал, что его упускают, когда Roboto Condensed дебютировал.Open Sans Condensed — еще один способ сэкономить место и передать ваше сообщение немного более эффективно, чем обычный Open Sans. Менее 1,5 миллиарда человек используют его во многих местах, таких как США, Россия, Великобритания, Италия и Франция. Популярные пары включают обычные Open Sans, Roboto, Oswald, Josefin Slab и Amatic SC.

15. Ubuntu

Unforgettable Ubuntu — это шрифт с равными возможностями. Он придерживается философии, аналогичной Noto Sans, полагая, что все языки должны уметь его использовать.Ubuntu может похвастаться более чем 1 миллиардом людей во многих странах, таких как США, Россия, Италия, Франция, Испания и Бразилия. Ему нравится появляться с Open Sans, Roboto, Lato, Oswald и Raleway.

16. Поппинс

Peppy Poppins оживляет геометрические узоры и сочетает в себе порядок и веселье. Его любимая форма — круг, поскольку он используется для сглаживания краев и углов, чтобы добавить мягкости его организации. Его используют более 1 миллиарда человек, в основном в США и Франции, где они любят включать его в Roboto, Open Sans, Raleway, Oswald и Playfair Display.

17. Дисплей Playfair

Professional Playfair Display отличается широкими засечками, в то же время сочетая мягкие закругленные края для большей доступности. Это отлично смотрится в печати и имеет сильную журнальную атмосферу. Им пользуются чуть более миллиарда человек, чаще всего в США, Франции, Италии и Испании. Roboto, Open Sans, Lato, Montserrat и Raleway чаще всего можно увидеть вместе с Playfair Display.

Лучшие практики по внедрению шрифтов Google в WordPress

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

Итак, с чего начать? Ниже мы перечислили некоторые рекомендуемые следующие шаги, которые помогут вам оптимизировать использование шрифтов на своем веб-сайте WordPress.

1. Выберите шрифт, подходящий для вашего сайта

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

2. Сформируйте творческую структуру

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

3. Ограничьте стили шрифтов

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

4. Помните о удобочитаемости

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

По этой причине при отображении шрифтов на вашем сайте удобочитаемость является важным фактором. Например, выбор неоновых цветов в Comic Sans — плохой выбор. Таким образом, если ваш шрифт приятен для чтения, это поможет сделать ваш сайт более дружелюбным для всех ваших пользователей. Одна из самых важных вещей здесь — это контраст, который вы можете проверить с помощью этого инструмента.

Кроме того, всегда полезно улучшить доступность вашего сайта.

5. Если у вас уникальный шрифт, разместите его локально

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

Какие лучшие шрифты Google для вашего сайта WordPress?

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

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

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

Какие шрифты Google вы считаете лучшими и почему? Дайте нам знать в комментариях ниже.


.

No related posts.