Интернет

Как использовать Google шрифты в вашем следующем веб-проекте и почему вы должны

Как использовать Google шрифты в вашем следующем веб-проекте и почему вы должны

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

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

Фон

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

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

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

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

Google Web Fonts

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

Более того, сайт Google Web Fonts позволяет легко сравнивать и выбирать, а затем предоставляет вам весь код, необходимый для встраивания шрифта с помощью Javascript или CSS — подробнее об этом позже.

Начиная

Перейдите на сайт веб-шрифтов и нажмите « Начать», чтобы выбрать шрифты для начала.

Google веб-шрифты

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

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

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

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

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

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

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

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

Как использовать Google шрифты в вашем следующем веб-проекте и почему вы должны сравнить

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

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

Как использовать Google шрифты в вашем следующем веб-проекте и почему вы должны предварительно просмотреть

ОК, выбрал. Как я могу их использовать?

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

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

Прокрутите вниз, чтобы получить соответствующий код. Здесь есть 3 варианта:

  • Стандартный (link rel = method) : его нужно вставить в раздел HEAD вашего сайта, поэтому вам нужно быть уверенным в HTML. Для WordPress вы добавите его в header.php, если выберете этот способ. Я не рекомендую это.
  • @import: этот метод идет непосредственно в ваш файл таблицы стилей, где мы все равно будем указывать шрифты для различных элементов страницы, поэтому лично я рекомендую это. Для тем WordPress поместите его в style.css сразу после раздела с информацией о теме.
  • Javascript : не требует пояснений — разместите код в любом месте вашей темы. Преимущество использования этого метода заключается в том, что шрифт будет загружаться асинхронно — сайт сначала будет отображаться в качестве резервного шрифта, а затем переключится после полной загрузки шрифта. Хотя начальное время загрузки страницы будет быстрее, оно создаст резкое внезапное изменение для пользователя, которое вы, возможно, не захотите.

Как использовать Google Fonts в вашем следующем веб-проекте и почему вы должны встраивать инструкции

Это шаг 1. Шаг 2 — указать шрифт, где вы хотите его использовать. У нас нет места для полного учебника по CSS здесь (я предлагаю эти 5 сайтов по изучению CSS изучения изучения ; и мои собственные 5 маленьких шагов 5 маленьких шагов ), но достаточно сказать, что вы будете корректировать в своей таблице стилей все, что говорит о семействе шрифтов , и обязательно включите стиль резервного копирования, предложенный Google.

Google веб-шрифты

оптимизированный

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

Резюме

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

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

Похожие посты
Интернет

Google Store Лучшие предложения

Интернет

Руководство по специальному режиму в сети

Интернет

10 советов по безопасности беспроводной домашней сети

Интернет

САН против НАН