Как я могу использовать кеширование браузера для шрифтов Google?

Ответ 1

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

Затем вы можете установить заголовки истечения (то, что Pingdom назвал "временем жизни" ), как вы пожелаете.

Например, откройте первую ссылку:

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Загрузите этот файл .woff2 и сохраните его в любом месте на вашем веб-сервере. Скопируйте и вставьте этот кусок таблицы стилей в любой из ваших собственных CSS файлов или HTML. Измените ссылку с fonts.gstatic.com на новый URL.

Google обслуживает эти шрифты с истечением 1 дня. Вы можете легко установить его на 30 дней.

Ответ 2

Не полное решение, но вы можете улучшить ситуацию, объединив два запроса к одному:

https://fonts.googleapis.com/css?family=Montserrat|Open+Sans

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

Ответ 3

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

Запросы на ресурсы CSS кэшируются в течение 1 дня. Это позволяет нам обновить таблицу стилей, чтобы указать на новую версию файла шрифта при его обновлении, и гарантирует, что все веб-сайты, использующие шрифты, размещенные API Google Fonts API, будут использовать самую последнюю версию каждого шрифта в течение 24 часов с каждого выпуска.

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

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

Однако есть несколько способов ускорить запрос CSS:

• Как отметил Марк в своем ответе, вы можете объединить два веб-сайта в один запрос: https://fonts.googleapis.com/css?family=Montserrat|Open+Sans
• Если вы используете только определенные стили любого шрифта, вы можете загружать только те стили, которые вы на самом деле используете. Здесь мы загружаем все Монтсеррат, но загружаем только три стиля Open Sans; (400), курсив (400i) и полужирный (700): <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,400i,700" rel="stylesheet">

Ответ 4

Помните, что вам не разрешено кэшировать css, предоставленные Google более 24 часов.

Просто сказать... в соответствии с условиями Google.

Ответ 5

Довольно простой способ - создать собственный комплект с Font Squirrel Webfont Generator:

https://www.fontsquirrel.com/tools/webfont-generator

Чтобы иметь возможность использовать это, вам нужно будет загрузить шрифты (Montserrat и Open Sans доступны на Font Squirrel) и добавить их в генератор. Это можно использовать для добавления дальнейшей настройки. (Я использовал его много раз в тех случаях, когда шрифт в Google Webfonts не имел необходимого подмножества для венгерского языка, хотя он был доступен в исходном шрифте.)

Ответ 6

То, что я получил, это добавить PHP в качестве постпроцессора к моим файлам CSS в моем .htaccess файле с кодом (я использую пользовательское расширение .pcss файла - просто чтобы оно было отделено от моих простых файлов CSS ):

<FilesMatch "\.pcss$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>

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

<?php
echo file_get_contents("https://fonts.googleapis.com/css?family={FONT}");
?>

Ответ 7

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

Одним из быстрых решений может быть Easy Fonts CDN, в котором размещены все шрифты Google, а также некоторые дополнительные функции, такие как:

1. Долгий срок действия файлов CSS. (Это решит проблему использования кэширования в браузере)
2. Легко отлаживаемые имена файлов шрифтов.
3. Классы шрифтов. Вы легко можете использовать CSS-классы для использования шрифтов в HTML, например, <div class="font-open-sans"></div>, <div class="font-lato"></div> и т.д. Полная ссылка доступно здесь.
4. Опция для единого файла шрифтов "все в одном", который вы можете включить во все свои проекты и забыть о поиске каталога Google Fonts снова и снова, чтобы получить новые CSS-URL.
5. Сохраняет 1 дополнительный вид DNS, потому что Google CSS размещен на fonts.googleapis.com, а фактические файлы шрифтов подаются с fonts.gstatic.com, в то время как файлы CSS и шрифты Easy Fonts подаются с pagecdn.io. Если вы используете PageCDN для других ресурсов с открытым исходным кодом или если вы размещаете свои собственные файлы в PageCDN, то это фактически спасет вас от двух поисков DNS, поскольку все файлы обслуживаются на одном хосте, который также используется для других файлов, и нет специального поиска DNS для шрифтов.
6. Согласованные CSS-URL. CSS для одного семейства шрифтов всегда будет загружаться через один URL. Это увеличивает повторное использование кэша браузера. CSS файлы Google Fonts смешивают имена семейств шрифтов и создают бесконечные возможные CSS файлы. Это уменьшает общий доступ к кешу через веб-сайты.

Если вы хотите использовать только шрифты Open Sans и Montserrat, вот ваш код:

<link href="#" onclick="location.href='https://pagecdn.io/lib/easyfonts/montserrat.css'; return false;" rel="stylesheet" />
<link href="#" onclick="location.href='https://pagecdn.io/lib/easyfonts/open-sans.css'; return false;" rel="stylesheet" />

Если вы хотите использовать файл "все в одном", используйте:

<link href="#" onclick="location.href='https://pagecdn.io/lib/easyfonts/fonts.css'; return false;" rel="stylesheet" />