Как подключить google fonts в css
Перейти к содержимому

Как подключить google fonts в css

  • автор:

Google Fonts. Документация и примеры использования

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

Простой пример подключения Google Fonts:

    body 
Making the Web Beautiful!

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

1. Подключаем шрифт как внешний файл в HTML через тег link :

2. Импортируем шрифт в свой CSS-файл или как инлайн-стили:

  

Используем шрифт просто в своих CSS правилах:

font-family: 'Tangerine', cursive;

Для Гугловских шрифтов доступны все те же правила и свойства, что и для обычных шрифтов (вдруг, кто не знал)

body

А теперь интересное.

1. Несколько шрифтов в одном запросе

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

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

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

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

Можно использовать сокращения:
italic — italic или i
bold — bold или b , или числовое значение 700
bold italic — bolditalic или bi

https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

2. Поддержка кириллицы

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

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

При этом латиницу не нужно подключать, она поддерживается по умолчанию.

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

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

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

так же поддерживаются пробелы и прочие символы в формате URL-encode

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

а еще поддерживаются UTF-8 символы, например, текст ¡Hola! можно вывести таким образом:

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

При подключении отдельных букв не нужно указывать язык с помощью параметра subset= , подключатся только те буквы, что будут указаны при подключении шрифта в параметре text=

4. CSS Эффекты для шрифтов

В Google Fonts есть встроенная поддержка CSS Эффектов для шрифтов, что может пригодиться для красивого выделения заголовков или других семантических частей текста. Для этого используется параметр effect=

Подключаем шрифт с эффектом shadow-multiple :

https://fonts.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

Список всех эффектов для нескольких шрифтов:

//fonts.googleapis.com/css?family=Tangerine|Rancho|Source+Sans+Pro:900&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper

Список всех эффектов на живом примере — Это переделанный пример с сайта Google Fonts — изменены урлы картинок, потому что у Google проблема с CORS policy: No ‘Access-Control-Allow-Origin’. И поэтому картинки с домена https://themes.googleusercontent.com/ не могут использоваться на других сайтах.

Список всех эффектов на живом примере на сайте https://developers.google.com/fonts/docs/getting_started — некоторые эффекты, в которых используются -webkit-mask-image могут не отображаться на данный момент

Вариант 1 — отрицательный отступ для родительского блока Самый простой способ установить минимальное расстояние между…

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для…

Очень популярная функция на различных одностраничниках — плавный скролл к нужному элементу на этой же…

Использование @keyframes с препроцессором SASS. Базовый пример использования @keyframes в SASS: Создаем миксин, чтобы добавить…

Подключение шрифта с Google fonts конфликтет с системным Объединением CSS файлов.

У меня уже была похожая проблема, но то была 7ка, а теперь работаю с Drupal 9.

Создаю свою тему . Подключаю в css файл шрифт с google fonts:

@import url ( ‘https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap’ ) ;
body <
background-color : #1D1D1D ;
color : white ;
font-weight : 400 ;
font-family : ‘Manrope’ , sans-serif ;
>

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

Если заменить подключение шрифта несколькими строчками (на каждый font-weght):

Тогда работает и со сжатием стилей.

Почему так происходит? В созданной теме что-то быть должно?

  • Drupal9
  • Есть вопрос
  • Решение проблем
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

VasyOK 25 апреля 2021 в 1:27

Сначала было:
base theme: claro
выставил
base theme: false

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

Не понимаю: почему так?

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

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

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

preload — это что?

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

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

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

А если бы шрифт был задан из файлов через font-face, то что?

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

gun_dose 25 апреля 2021 в 20:09

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

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

VasyOK 25 апреля 2021 в 20:11

У меня минификаторы ломаются и от font-face — без Гугла.

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

gun_dose 25 апреля 2021 в 21:34

Ну вот короче какая-то дичь. Гуглил помню это дело, проблема встречается иногда. Решения не нашёл. Закинуть это дело через линки в галаву вполне себе вариант.

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

OldWarrior 26 апреля 2021 в 2:42

VasyOK wrote:. Если заменить подключение шрифта несколькими строчками (на каждый font-weght) .

А почему бы вместо @import не попробовать просто подключить гугловскую шрифтовую CSS через библиотеку темы — как ‘external’? Ну и поставить ей вес -10 или сколько там нужно.

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

Видимо придеться возвратиться к этому вопросу.
Подключил шрифт в тему через < link rel= "preconnect" .

Google page speed все равно ругается на шрифт. Пишет:
/*————————————*/
Некоторые ресурсы блокируют первую отрисовку страницы. Рекомендуем встроить критическую часть данных JS/CSS в код HTML и отложить загрузку остальных ресурсов
URL
/css2?family=Open+Sans:wght@400;600;700;800&display=swap(fonts.googleapis.com)
/*————————————*/

Что-то можно сделать, чтобы шрифт подключался, но этого сообщения не было?

подключить гугловскую шрифтовую CSS через библиотеку темы — как ‘external’?

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

ivnish 6 мая 2021 в 13:01

Скачай шрифты, положи локально

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

VasyOK 6 мая 2021 в 15:21

Ты прав! Действительно через @font-face пейджспид гораздо лучший результат выдает.

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

Как подключить google fonts в css

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

Главная СтатьиКак использовать Google Fonts и font-display
Поделиться в соцсетях:

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

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

Как добавить Google Fonts в свой проект

Существует два основных метода добавления Google Fonts в ваш проект: ссылкой и импортом. Также их можно скачать и подключить в стилях с помощью правила @font-face .

Добавление шрифтов Google ссылкой

Это наиболее распространенный способ добавления шрифтов Google в ваш проект. Для этого выполните следующие действия:

  1. Зайдите на сайт Google Fonts.
  2. Выберите шрифт, который хотите использовать.
  3. Кликните на шрифт, чтобы открыть страницу сведений о нем.
  4. Выберите нужные стили и жирность шрифта.
  5. Если панелька справа с выбранными опциями шрифта не появилась, нажмите иконку «Показать выбранное».
  6. В выехавшей панели выберете опцию и вы увидите код для добавления шрифта.

Например, чтобы добавить шрифт «Roboto», тег ссылки будет выглядеть так:

Его необходимо будет вставить в ваш HTML.

Добавление шрифтов Google импортом

Импортировать шрифты Google можно используя правило @import в вашем файле CSS. Для этого выполните следующие действия:

  1. Выполните шаги 1-5 из способа выше.
  2. Вместо опции переключитесь на опцию @import.
  3. Скопируйте предоставленный фрагмент кода и вставьте его в начало файла CSS.

Например, для импорта шрифта «Roboto» правило будет выглядеть так:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Подключение шрифтов с помощью @font-face

Посетив сайт Google Fonts и выбрав необходимый шрифт, вы можете его скачать, кликнув на соответствующей иконке в верхней панели. Далее, каждый из необходимых шрифтов можно подключить в CSS-стилях отдельно, используя правило @font-face . Например, подключить скачанный шрифт «Roboto-Regular» можно следующим образом:

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; >

Значения свойства font-display

Свойство font-display имеет пять возможных значений, каждое из которых имеет разное поведение при отрисовке страницы.

auto

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

block

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

swap

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

fallback

Значение представляет собой комбинацию block и swap . Браузер сначала скроет текст на короткое время (обычно около 100 мс). Если пользовательский шрифт загрузится в течение этого времени, браузер отобразит его. В противном случае он покажет резервный шрифт. По прошествии более длительного периода (обычно около трех секунд), если пользовательский шрифт все еще не загружен, браузер сдастся и продолжит использовать резервный шрифт.

optional

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

Реализация свойства font-display

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

Для шрифта, добавленных ссылкой, значение можно изменить в параметре адреса. Например, для примера выше установим значение font-display: fallback :

Для шрифта, импортируемого в CSS с помощью @import , значение устанавливается подобным образом:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=fallback');

Если шрифт подключается с помощью @font-face , к остальным стилям добавляется еще один:

@font-face < font-family: 'Roboto'; src: url('path/to/Roboto-Regular.ttf'); font-weight: normal; font-style: normal; font-display: fallback; >

Распространенные проблемы и их решение

Ниже описаны самые распространенные проблемы и их решения при использовании Google Fonts и свойства font-display .

Пользовательский шрифт не загружается или не отображается

  • Убедитесь, что вы правильно добавили тег или правило @import в свой файл HTML или CSS.
  • Проверьте наличие опечаток или неправильного URL-адреса.
  • Убедитесь, что в ваших стилях CSS используется правильное имя семейства шрифтов и его толщина.

Мелькание невидимого текста или мелькание нестилизованного текста

  • Выберите другое значение font-display , которое лучше соответствует вашим требованиям. Например, если вы столкнулись с резким появлением текста из невидимого, попробуйте использовать значение swap или fallback . Если вы столкнулись с резким мельканием при изменении шрифта, рассмотрите возможность применения значения block или fallback .
  • Убедитесь, что ваш пользовательский шрифт загружается как можно раньше в процессе загрузки страницы.
  • Оптимизируйте размер файла шрифта, выбрав только необходимые стили и толщину.

Несогласованное отображение шрифтов в разных браузерах.

  • Установите одно из конкретных значений font-display вместо auto .
  • Протестируйте свой веб-сайт в различных браузерах на предмет корректных стилей для шрифта.

До свидания, Google Fonts. Последний аргумент

Шрифты Google Fonts страшно популярны. Их загружают более 42,8 миллиона сайтов, в том числе Хабр. Библиотека Google Fonts содержит 1023 свободных шрифта и программные интерфейсы для их внедрения через CSS. Очень удобно, казалось бы.

Во многих статьях отмечалось, в какую цену обходятся многочисленные запросы через API. Совет самостоятельно хостить шрифты дают много лет. Даже сама Google давала такой совет на конференции Google I/O 2018 года в выступлении на тему веб-производительности.

Так почему же многие до сих пор загружают шрифты через Google Fonts API? Ну, был последний аргумент — кэширование. Мол, благодаря общему CDN пользователю не нужно скачивать шрифт заново с каждого сайта. Однако в октябре 2020 года этот аргумент перестал работать. Теперь шрифты Google Fonts больше не кэшируются!

Свой хостинг быстрее

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

Загрузка Google Fonts без preconnect

Оптимизированная загрузка Google Fonts с опцией preconnect (подсказка для браузера заранее подключиться к домену fonts.gstatic.com, чтобы ускорить установку соединения в будущем):

Загрузка Google Fonts с preconnect

Дело в том, что Google всегда запрашивает с сервера таблицу стилей:

Она загружается в любом случае. А уже потом декларация @font-face говорит браузеру использовать локальную (кэшированную) версию шрифта при наличии таковой. По крайней мере, так было раньше:

@font-face < font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0bf8pkAg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; >

Но в последнее время Google удалила фунцию local() из @font-face в Google Fonts! То есть шрифты Google Fonts теперь не могут считываться локально, если использовать API.

Из-за дополнительных запросов в к серверу Google возникает лишняя задержка.

Загрузка с fonts.gstatic.com с опцией preconnect

Загрузка со своего хостинга с опцией preload

Как видим, во втором случае запросы к fonts.gstatic.com отсутствуют, что сразу сокращает время загрузки страницы. Это самый оптимальный вариант.

Размещение шрифтов Google Fonts у себя

Марио Ранфтль создал очень полезный справочник google-webfonts-helper. Здесь можно выбрать конкретные шрифты из библиотеки Google Fonts, нужные наборы символов, начертания, посмотреть поддержку в браузерах — и получить код CSS и непосредственно сами файлы. То есть можно перенести нужные шрифты на свой хостинг в пару нажатий кнопки мыши.

Выбираем шрифт, наборы символов и стили. Чем больше стилей мы выберем, тем больше объём скачивания для клиента.

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

Самое популярное в коллекции Google Fonts семейство шрифтов Roboto

И получаем код CSS для вставки. Вариант для поддержки максимальным количеством браузеров, в том числе устаревшими:

/* roboto-regular - latin_cyrillic */ @font-face < font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/roboto-v20-latin_cyrillic-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/roboto-v20-latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-v20-latin_cyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-v20-latin_cyrillic-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-v20-latin_cyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-v20-latin_cyrillic-regular.svg#Roboto') format('svg'); /* Legacy iOS */ >

Вариант для поддержки только современными браузерами:

/* roboto-regular - latin_cyrillic */ @font-face < font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local(''), url('../fonts/roboto-v20-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/roboto-v20-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ >

Как видим, здесь функция local() сохранилась, в отличие от официальных стилей Google.

Директория по умолчанию для шрифтов ../fonts/ .

Современным браузерам достаточно файлов WOFF и WOFF2, а для устаревших нужны ещё форматы TTF, EOT и SVG. Например, один из вариантов — отказаться от «устаревших» форматов, отдавать только WOFF и WOFF2, а если у клиента старый браузер, то страница отобразится системным шрифтом, без загрузки лишних файлов.

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

Оптимизация загрузки

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

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

Последний аргумент

Итак, единственным аргументом в пользу Google Fonts была быстрая и надёжная сеть доставки контента (CDN) с кэшированием. Google владеет точками присутствия у всех крупных провайдеров по всему миру.

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

Но теперь так больше не работает. Начиная с версии Chrome 86, которая вышла в октябре 2020 года, межсайтовые ресурсы вроде шрифтов больше не делят общий CDN из-за разделённого браузерного кэша (partitioned browser cache).

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

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

Долгое время такой механизм хорошо работал с точки зрения производительности. Однако в последнее время появились идеи, как его эксплуатировать во вред людям. Оказалось, что по отклику браузера можно определить, что браузер или 1) скачивает ли ресурс заново, или 2) ресурс уже есть в кэше. Соответственно, в достаточно продвинутой атаке можно понять, какие сайты этот браузер посещал в прошлом. А исследователи доказали, что по истории посещённых сайтов/страниц можно с высокой степенью достоверности идентифицировать личность пользователя, даже если браузер запущен в режиме инкогнито, блокируется JavaScript и удаляются куки. То есть история посещённых страниц — тоже подходящий вариант для фингерпринтинга.

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

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

В новой реализации в качестве ключа кэша используется не только URL ресурса, а новый составной параметр Network Isolation Key. Он состоит из трёх частей: домен верхнего уровня, домен текущего фрейма и URL ресурса.

Таким образом, при посещении нового сайта тот же шрифт будет скачиваться заново с того же URL.

Разделённый кэш присутствует в Safari c 2013 года. Остальные подтянулись только сейчас:

  • Chrome: c версии 86 (октябрь 2020)
  • Safari: с 2013 года
  • Firefox: планируется реализовать
  • Edge: вероятно, в ближайшее время
  • Opera: вероятно, в ближайшее время
  • Brave: вероятно, в ближайшее время
  • Vivaldi: вероятно, в ближайшее время

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

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

Что делать?

Печально, что из-за приватности приходится жертвовать производительностью и делать лишние сетевые запросы.

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

    Отключить загрузку сторонних шрифтов в uBlock Origin.

    Firefox: about:config , gfx.downloadable_fonts.enabled ;

  • Chrome: запуск с параметром —disable-remote-fonts
  • В качестве эксперимента попробовать локальный CDN, хотя Decentraleyes и LocalCDN на практике некэшируют Google Fonts.
  • Раньше был вариант скачать все шрифты Google Fonts (около 300 МБ) и установить в системе. Но как сказано выше, такой вариант больше не работает из-за изменений @font-face . Если сайт использует Google Fonts, шрифты всё равно будут загружаться каждый раз заново. Локальная установка не поможет.

    На правах рекламы

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *