25 Gorgeous Web Safe Fonts для вашего сайта

Обновлено: 25 марта 2021 г. / Автор статьи: Азрин Азми

Разглашение: WHSR поддерживается читателями. Когда вы покупаете по нашим ссылкам, мы можем получать комиссию.

Шрифты. Мы видим их каждый день. В мире есть все виды шрифтов, от печатной рекламы до журналов.

Независимо от того, являетесь ли вы владельцем магазина электронной коммерции или начинающим блогером, единственное, что объединяет все веб-сайты, - это использование текста для контента.

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

Но что еще важнее, чтобы они были безопасными для Интернета шрифтами.

Что такое безопасные веб-шрифты?

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

Почему важны веб-безопасные шрифты?

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

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

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

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

Должен ли я использовать веб-безопасные шрифты для моего сайта?

Короткий ответ: Абсолютно.

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

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

Как добавить эти веб-безопасные шрифты?

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

Если вы все еще не уверены, просто выполните следующие несколько простых шагов:

  1. Загрузите файл header.php
  2. Скопируйте исходный / стандартный код шрифта (см. Ссылку 1)
  3. Вставьте код в верхней части файла заголовка.
  4. Загрузите свой style.css, поместите код шрифта, чтобы изменить текст шрифта по вашему выбору. (см. ссылку 2)

Ссылка 1

Ссылка 2

body {font-family: 'Abel'; font-size: 22px;}

25 Gorgeous Web Safe Fonts для вашего сайта

1. Arial

Web Safe Fonts - Arial

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

2. Calibri

Web Safe Fonts - Calibri

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

3. Helvetica

Web Safe Fonts - Helvetica

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

4. Пользовательский интерфейс Segoe

Web Safe Fonts -  Segoe UI

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

5. Trebuchet MS

Web Safe Fonts - Trebuchet

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

6. Камбрия

Web Safe Fonts - Cambria

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

7. Palatino

Web Safe Fonts - Palatino

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

8. Perpetua

Web Safe Fonts - Perpetua

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

9. Грузия

Web Safe Fonts - Georgia

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

10. Consolas

Web Safe Fonts - Consolas

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

11. Новый Курьер

Web Safe Fonts - Courier New

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

12. Tahoma

Web Safe Fonts - Tahoma

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

13. Verdana

Web Safe Fonts - Verdana

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

14. Optima

Web Safe Fonts - Optima

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

15. Gill Sans

Web Safe Fonts - Gill Sans

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

16. Готический век

Web Safe Fonts - Century Gothic

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

17. Candara

Web Safe Fonts - Candara

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

18. Андале Моно

Web Safe Fonts -  Andale Mono

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

19. Дидо

Web Safe Fonts - Didot

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

20. Копперская готика

Web Safe Fonts - Copperplate

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

21. Rockwell

Web Safe Fonts - Rockwell

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

22. Бодони

Web Safe Fonts - Bodoni

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

23. Франклин Готик

Web Safe Fonts - franklin Gothic

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

24. Влияние

Web Safe Fonts - Impact

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS 

25. Calisto MT

Web Safe Fonts - Calisto

Ссылки / Источник: Fonts.com / Шрифт шрифта CSS

Шрифтовые инструменты для проверки

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

Шрифтовая пара

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

Wordmark.it

Если вы хотите быстро просмотреть, как будет выглядеть ваш текст с определенным шрифтом, Wordmark.it дает вам мгновенный предварительный просмотр того, как ваш текст будет отображаться сразу на нескольких шрифтах. Просто введите слово или фразу на панели своей главной страницы, нажмите «Ввод», и он покажет вам текст с разными шрифтами, такими как Candara или Lucida Console.

WhatTheFont

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

Это все о шрифтовой игре

Use WHSR tool to check website font script
Наш собственный инструмент может проверить скрипты шрифтов, которые использует веб-сайт (посмотрите - Инструмент WHSR).

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

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

Прочитайте больше:

О компании Азрин Азми

Азрин Азми - писатель с склонностью писать о маркетинге и технологии контента. С YouTube на Twitch он пытается поддерживать связь с последним в создании контента и узнавать лучший способ продвижения вашего бренда.

Подключение: