Шрифт Lato не отображается в браузере

Обновлено: 02.07.2024

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

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

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

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

Готовы добавить пользовательские шрифты в WordPress? Тогда приступим.

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

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

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

Краткая история веб-типографики

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

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

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

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

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

Введите шрифты Google

Многое изменилось, когда в 2010 году был представлен Google Fonts. Хотя Google Fonts и не был первым в своем роде сервисом (ранее был Typekit), он стал популярным местом для пользовательской веб-типографики.

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

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

Звучит неплохо, правда? Теперь, если вы хотите узнать, как использовать шрифты Google на веб-сайте WordPress, просто продолжайте читать. Это именно то, к чему мы сейчас подойдем.

Как добавить шрифты Google в WordPress вручную

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

1. Найдите подходящий шрифт

Самый первый шаг — перейти на веб-сайт Google Fonts и выбрать шрифт. Есть несколько способов сделать это.

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

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

• Serif — это шрифты с небольшими волнистыми линиями на конце. Times New Roman — хороший пример шрифта с засечками.
• Sans-Serif — это простые шрифты без маленьких линий. Посмотрите, какой шрифт мы используем на этом веб-сайте, чтобы понять, о чем мы говорим.
• Дисплей. Найдите шрифты, которые можно использовать на большом экране, например для заголовков и заголовков.
• Рукописный текст — типографика, которая выглядит так, как будто кто-то нарисовал ее от руки.
• Моноширинный — шрифты с одинаковыми интервалами между символами. Любой, кто уже использовал компьютеры в конце 80-х, видел это.

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

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

• Количество стилей – сколько различных стилей предлагает шрифт.
• Толщина — от очень тонких букв до очень толстых.
• Наклон. Буквы прямые или наклонные?
• Ширина — поиск по расстоянию между буквами и символами.

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

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

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

2. Выберите шрифт

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

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

3. Выберите стили и дополнительные наборы символов

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

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

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

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

4. Встраивайте шрифты на свой сайт WordPress

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

Отсюда мы можем встроить наши пользовательские шрифты с помощью CSS, HTML или функции WordPress. Хотя последний способ рекомендуется, я покажу вам, как сделать и другие.

a) Добавление пользовательских шрифтов в WordPress с помощью @font-face

С помощью оператора CSS @font-face вы можете указать браузерам загружать шрифты, расположенные на вашем собственном сервере.

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

Загрузку можно выполнить с помощью значка в правом верхнем углу.

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

Проблема с этим методом: для достижения наилучших результатов вам может потребоваться добавить шрифты в нескольких форматах. Хотя большинство современных браузеров могут работать с файлами .ttf (шрифты True Type), не все старые могут это делать.

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

b) Вызов шрифтов через CSS с использованием @import

Второй вариант добавления пользовательских шрифтов в WordPress – загрузить их в таблицу стилей с помощью @import. Этот метод аналогичен @font-face, однако вместо загрузки шрифта с вашего собственного сервера вы вызываете его откуда-то еще (в данном случае из Google).

Настроить это довольно просто, так как Google предоставляет готовое решение. Просто нажмите @import в шрифтах Google, чтобы найти необходимый код CSS.

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

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

c) Встраивание шрифтов Google через HTML

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

Сохраните, и все готово. Чтобы ускорить процесс, здесь также можно объединить несколько шрифтов в одну загрузку.

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

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

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

d) Постановка шрифтов Google в очередь — способ WordPress

Последний и рекомендуемый способ добавления шрифтов Google на ваш сайт — использование функции wp_enqueue_style.

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

Теперь все, что нам нужно сделать, это обернуть вокруг него некоторый код, чтобы он правильно загружался, а затем добавить его в файл functions.php нашей (дочерней) темы.

Сохраните, загрузите и это должно сработать. Только не забудьте заменить ссылку на свою.

5. Вызов шрифтов Google в своей таблице стилей

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

На самом деле Google так мил, что предоставляет вам необходимый CSS для этого, включая резервный шрифт!

Пример того, как вы можете использовать его на своем сайте:

Вот и все. Не так уж и сложно, не так ли? Однако, если вы не любитель «сделай сам», вы также можете добиться того же с помощью плагина WordPress. Сейчас мы покажем вам, как это сделать.

Добавление Google Fonts в WordPress с помощью плагина

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

1. Установите плагин

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

После установки не забудьте активировать!

2. Изменить шрифт

После установки Easy Google Fonts добавляется новое меню Типографика в настройщик WordPress (его можно найти в разделе Внешний вид > Настроить).

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

Чтобы показать вам, как это работает, предположим, что я хочу изменить заголовок H2 на шрифт Advent Pro. Для этого мне сначала нужно щелкнуть меню Заголовок 2 в разделе Типографика по умолчанию, чтобы открыть его.

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

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

Когда я это сделаю, сразу изменится шрифт в моем окне предварительного просмотра.

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

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

Кроме того, Позиционирование дает нам возможность изменять поля, отступы, границу, радиус границы и параметры отображения.

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

3. Добавление собственных классов CSS

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

Например, в стандартной теме Twenty Sixteen я обнаружил, что не могу изменить заголовок H1 в настройщике. Это потому, что этот заголовок вызывается не только стандартным тегом H1, но и классом CSS с именем .entry-title (как я узнал после просмотра заголовка с помощью инструментов разработчика Firefox). По этой причине подключаемый модуль не смог изменить свой шрифт.

Если вы попали в подобную ситуацию, вы можете решить ее, создав собственные элементы управления шрифтами в разделе Настройки > Шрифты Google

.

Ваша первая задача – ввести имя элемента управления шрифтом в соответствующее поле. Я использую Название записи. После этого нажмите Сохранить управление шрифтом.

На следующем экране вам нужно добавить селектор CSS, которым вы хотите управлять. Как упоминалось ранее, в моем случае это .entry-title.

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

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

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

Отлично, правда? И совсем не тяжело. Тем не менее, если это все еще не работает для вас, вам, возможно, придется установить флажок Force Styles Override в меню управления шрифтами. Однако в большинстве случаев обычного способа должно быть достаточно.

Вот оно! Теперь вы знаете, как добавить шрифты Google в WordPress как вручную, так и с помощью плагина. Если вы хотите попробовать альтернативу Easy Google Fonts, вы можете изучить WP Google Fonts, который имеет аналогичную функциональность. Однако на данный момент мы закончили.

Добавление пользовательских шрифтов в WordPress — не так сложно, как кажется

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

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

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

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

Как добавить собственные шрифты на сайт WordPress? Любые дополнительные советы или мысли по поводу вышеизложенного? Дайте нам знать в разделе комментариев ниже.

Еще пару дней назад все работало нормально. Затем я заметил, что стили шрифтов игнорируются в Chrome.

Я узнал, что если я меняю Лато на что-то другое, а затем возвращаюсь к Лато, некоторые разделы исправляются. Однако это не работает для Quicksand.

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

Любая помощь приветствуется. Спасибо!

Просто просмотрите сайт в Safari, и вы увидите, как именно он должен быть оформлен

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

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

Пожалуйста, очистите кеш и повторите попытку или предоставьте нам несколько снимков экрана.

Вложения:

Я очистил кеш и не вижу разницы. Пожалуйста, смотрите скриншоты, прикрепленные здесь. Интересно, что в разделе «Меню» текст описания (мелкий, серый шрифт) отображается правильно, а все остальное — нет.

Извините, скриншоты не загрузились. Попробуем еще раз…

Я очистил кеш и не вижу разницы. Пожалуйста, смотрите скриншоты, прикрепленные здесь. Интересно, что в разделе «Меню» текст описания (мелкий, серый шрифт) отображается правильно, а все остальное — нет.

Вложения:

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

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

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

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

Google Fonts изначально были запущены в 2010 году как Google Web Fonts, и этим все сказано. Google Font — это веб-шрифт из…. как вы уже догадались: Google!

Каталог шрифтов с открытым исходным кодом от Google на сегодняшний день является самым популярным каталогом в мире. Беглый взгляд на аналитику сразу снесет вам шляпу. Мы сделали снимок для вас.

Зачем использовать шрифты Google?

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

Поприветствуйте своих гостей стильно на Smart TV.
Подарите своим гостям что-то особенное, динамически приветствуя их и предоставляя им необходимую информацию. Ознакомьтесь с Упрощением экрана

Недостатки Google Fonts и их локального размещения

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

Кроме того, если вы не используете CDN, например Cloudflare или KeyCDN (пожалуйста, сделайте это!), в конечном итоге вы можете замедлить работу своего веб-сайта, разместив шрифты локально. CDN уменьшает количество запросов DNS и увеличивает скорость веб-сайта в целом. Он предназначен для всего этого. И Google, да, это Google, очевидно, делает то же самое. Поэтому их шрифты загружаются относительно быстро, если сравнивать с загрузкой ресурсов с посредственных серверов. Мы советуем не размещать шрифты локально, если вы не используете CDN.

Пошаговое руководство по размещению Google Fonts Local

Шаг 0. Давайте быстро проведем тест, чтобы увидеть, где мы находимся

Мы используем GT Metrix, чтобы получить некоторую информацию перед началом работы.ОК... важные цифры для нас здесь таковы: у нас 71 запрос, размер страницы 1,56 МБ, и мы полностью загружаемся за 3,1 секунды. Что мы можем сделать лучше. Следуйте приведенному ниже руководству и узнайте, к чему оно нас приведет.

Шаг 1. Посмотрите, какие шрифты вы используете

Шаг 2. Загрузите нужные файлы шрифтов

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

Лучший способ загрузить шрифты Google — использовать бесплатный помощник Google Webfonts. Сначала выберите нужный шрифт, а затем выберите нужные стили. Для нас это будет шрифт «Lato» в стилях «Regular (400)» и «Bold (700)». Также нам нужны оба набора символов «Latin» и «Latin-ext».

Этот бесплатный сервис позволяет загружать шрифты в файлах с разными расширениями, предоставляя возможность выбора «Лучшая поддержка» или «Современные браузеры». С «Лучшей поддержкой» вы получите все типы файлов, где версия «Современные браузеры» ограничит это только наиболее сжатыми расширениями .woff и .woff2. И этот последний вариант — то, что нам нужно.

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

Шаг 3. Загрузите файлы шрифтов на свой сервер

Далее вы возьмете файлы, которые вы только что скачали, и загрузите их на свой сервер через FTP. Мы создали новую папку под названием «шрифты» и загрузили сюда шрифты.

< бр />

Шаг 4. Добавьте эти шрифты в CSS

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

Убедитесь, что исходный URL правильный. Он должен указывать на файлы, которые вы только что загрузили через FTP. Если вы используете CDN, как мы используем KeyCDN, вам нужно изменить путь к файлу, чтобы он ссылался на CDN. Небольшое примечание: наши загрузки через FTP автоматически копируются в нашу CDN.

Я слышал, вы думаете: «CDN не является локальным, не так ли?» Что ж, если ваши файлы поступают с другого сервера, они по-прежнему считаются вашими локальными активами. И все остальные ваши активы уже будут поступать с того же сервера CDN. Так что в этом случае вы можете с уверенностью сказать, что вы делаете «Локальное размещение шрифтов Google», и вы сделали все это с помощью CSS.

Поприветствуйте своих гостей стильно на Smart TV.
Подарите своим гостям что-то особенное, динамически приветствуя их и предоставляя им необходимую информацию. Ознакомьтесь с Упрощением экрана

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

Шаг 5. Давайте посмотрим, где мы находимся

Итак, следуя этим шагам, мы значительно повысили рейтинг нашей страницы. Мы уменьшили наш запрос на «2», убрав 0,34 МБ от общего размера страницы, и все это привело к сокращению времени загрузки на 1 секунду, улучшение на 33%!

Уберите сообщение «Убедитесь, что текст остается видимым во время загрузки веб-шрифта»

Пока мы на этом, мы могли бы просто избавиться от этого сообщения. Когда вы используете PageSpeed ​​Insights для измерения своего сайта, вы, вероятно, видели инструкцию «Убедиться, что текст остается видимым во время загрузки веб-шрифта»

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

font-display:swap; Указывает браузеру использовать резервный шрифт для отображения текста до тех пор, пока пользовательский шрифт не будет полностью загружен. Это также известно как «вспышка нестилизованного текста» или FOUT.

Заключение

Локальное размещение шрифтов Google Fonts с помощью CSS сократило время загрузки нашей страницы на 33 %, а ее размер — на 0,34 МБ. В некоторых случаях это определенно путь вперед. Для нас это большая прибавка. Но давайте будем честными, мы уже начали с довольно быстрого сайта.

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

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

Раймонд — голландец с венгерскими корнями, живущий в Австрии. Вы все еще можете следовать? Помимо того, что он любит жизнь на свежем воздухе в горах, он проводит большую часть своего времени в помещении, играя с компьютерами. У него более 10 лет опыта разработки веб-сайтов, особенно в области электронной коммерции.

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

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

Использовать шрифты по умолчанию

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

Перейдите к своему контенту:

• Страницы веб-сайта. В своей учетной записи HubSpot выберите Маркетинг > Веб-сайт > Страницы веб-сайта.
• Целевые страницы. В своей учетной записи HubSpot выберите Маркетинг > Целевые страницы.
• Блог. В своей учетной записи HubSpot выберите Маркетинг > Веб-сайт > Блог.
• База знаний. В своей учетной записи HubSpot выберите Сервис > База знаний.
• Электронная почта. В своей учетной записи HubSpot выберите Маркетинг > Электронная почта.

Таймс Нью Роман

*Недоступно в редакторе электронной почты с перетаскиванием.

**Доступно только в качестве веб-шрифта в редакторе электронной почты с перетаскиванием.

Использовать шрифты Google

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

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

Обратите внимание: Google Fonts нельзя выбрать в раскрывающемся меню шрифтов редактора форматированного текста.

Использование шрифта Google в призыве к действию

• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">Скопируйте код Google для настройки правил CSS для этого шрифта. Ведущий захват >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""">
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В своей учетной записи HubSpot перейдите в раздел Маркетинг > Привлечение лидов > CTA.
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >Наведите курсор на призыв к действию, затем нажмите раскрывающееся меню "Действия" и выберите "Изменить".
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >На правой панели нажмите Дополнительные параметры.
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В текстовое поле вставьте код Google для настройки правил CSS для этого шрифта.
• В правом нижнем углу нажмите "Далее". Затем нажмите Сохранить. Ведущий захват >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""">

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

• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В своей учетной записи HubSpot перейдите в раздел «Маркетинг» > «Привлечение лидов» > «Формы».
• Привлечение потенциальных клиентов >СТА.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""">Наведите указатель мыши на название формы и нажмите Действия > Изменить форму или Создать новую форму.
  
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В редакторе форм перейдите на вкладку "Стиль и предварительный просмотр".
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В меню левой боковой панели выберите раздел «Стиль».
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В разделе Текст откройте раскрывающееся меню "Семейство шрифтов" и выберите шрифт Google.
• Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В правом верхнем углу нажмите "Обновить" или "Опубликовать", чтобы изменения вступили в силу.

Использование шрифта Google в пользовательском модуле

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

• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В своей учетной записи HubSpot выберите Маркетинг > Файлы и шаблоны > Инструменты дизайна.

• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В поисковике слева откройте пользовательский модуль. Подробнее о создании пользовательского модуля.
• В инспекторе справа нажмите раскрывающееся меню Добавить поле в разделе Поля и выберите Шрифт . Узнайте больше о работе с полями шрифта.

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

Перейдите к своему контенту:

• Страницы веб-сайта. В своей учетной записи HubSpot выберите Маркетинг > Веб-сайт > Страницы веб-сайта.
• Целевые страницы. В своей учетной записи HubSpot выберите Маркетинг > Целевые страницы.
• Блог. В своей учетной записи HubSpot выберите Маркетинг > Веб-сайт > Блог.

Использовать пользовательские шрифты

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

Обратите внимание: пользовательские шрифты необходимо применять с помощью CSS. Добавление пользовательского шрифта не добавит шрифт в раскрывающиеся меню стилей в редакторе содержимого.

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

с. Вы можете использовать режим Эксперт в инструменте конвертера Font Squirrel для создания дополнительных форматов файлов.

• В своей учетной записи HubSpot выберите Маркетинг > Файлы и шаблоны > Файлы.
• Нажмите Загрузить файлы.
• На жестком диске компьютера выберите файлы шрифтов, затем нажмите «Открыть».
• Нажмите имя загруженного файла шрифта.
• На правой панели нажмите «Копировать URL», чтобы скопировать URL-адрес, на котором размещен файл. Вам понадобится URL-адрес шрифта в каждом формате файла.

Использование пользовательского шрифта в таблице стилей

После того как вы добавили пользовательский шрифт в инструмент файлов, вы можете сослаться на него в таблице стилей. Для каждого стиля шрифта (курсив, полужирный и т. д.) потребуется отдельное правило @font-face. Узнайте больше о работе с таблицами стилей в HubSpot.

• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В своей учетной записи HubSpot выберите Маркетинг > Файлы и шаблоны > Инструменты дизайна.
• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В Finder откройте таблицу стилей, используемую для вашего контента.
• Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">Для каждого стиля шрифта:
  • В верхней части таблицы стилей вставьте следующий код:
  • • Замените Имя вашего шрифта на название шрифта.
    • Замените your_font_file.xxx? URL-адресом из инструмента файлов. Повторите для каждого формата файла. Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""">

    
    

    Использование пользовательского шрифта в пользовательском кодированном шаблоне электронной почты

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

    • Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В своей учетной записи HubSpot выберите Маркетинг > Файлы и шаблоны > Инструменты дизайна.
    • Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В Finder откройте шаблон электронной почты с пользовательским кодом.
    • Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">Для каждого стиля шрифта:
      • Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=" "">В разделе шаблона вставьте этот код между тегами:
      • • Замените Имя вашего шрифта на название шрифта.
        • Замените your_font_file.xxx? URL-адресом из инструмента файлов. Повторите для каждого формата файла. Файлы и шаблоны >Инструменты дизайна.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""">

        Использовать собственный шрифт в призыве к действию

        После того как вы добавили пользовательский шрифт в инструмент файлов, вы можете использовать его в CTA:

        • Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >В своей учетной записи HubSpot перейдите в раздел Маркетинг > Привлечение лидов > CTA.
        • Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >Наведите курсор на призыв к действию, затем нажмите раскрывающееся меню "Действия" и выберите "Изменить".
        • Привлечение потенциальных клиентов >CTA.">" data-sheets-userformat=","14":,"15":"Arial","16":10>" data-sheets-formula="=""" >На правой панели нажмите Дополнительные параметры.
        • Вставьте в текстовое поле этот код:

        font-family: 'Название вашего шрифта';

        • Замените Имя вашего шрифта на название шрифта.
        • В правом нижнем углу нажмите "Далее". Затем нажмите "Сохранить".

        
        

        Использование пользовательского шрифта в пользовательском модуле

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

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

          
        • Программы для проверки ноутбука при покупке
          
        • Как сделать одну страницу в альбомной ориентации другой книги в Word
          
        • Подсчет выделенных жирным шрифтом строк в Excel
          
        • Как прошить iPad через компьютер
          
        • Настройка Outlook для почты для домена