Rails Google Font Cache

Question

У меня есть приложение rails с использованием Bootstrap и SASS, и я использую шрифты Google.

загружает мои шрифты импорта в моем файле CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800); 

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

Я уже пытался добавить WebFonts в мое приложение, чтобы он закрывал шрифты для меня, но не работал.

Кто-то знает, как правильно кэшировать шрифты?

Спасибо заранее

Answer 1

Шрифт должен кэша, и так должны шрифты Google делать. Смотрите также; https://developers.google.com/fonts/faq#Performance:

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

Вы должны заметить, что SASS компилирует @import url() в точности @import url(), поэтому ваш код sass приводит к «нормальному» css import. Вышеупомянутое также дает понять, что ваша проблема не связана с Sass (или ни с Rails) вообще.

CSS @import s с url() использует HTTP-запрос для загрузки кода CSS из внешнего источника в ваш код CSS.

Так что в вашей ситуации https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 не хранит ваш шрифт, но этот URI возвращает только код CSS. Этот CSS-код содержит объявления @font-face для ваших шрифтов.

Google предотвращает запросы fonts.googleapis.com от кеширования. В объявлениях @font-face в этих результатах также содержится запрос url(), указывающий на файлы шрифтов. Например: src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');

(@import создать запрос HTTP с max-age=0 заголовка (см: What's the difference between Cache-Control: max-age=0 and no-cache?) и Google не реагирует с Not Modified заголовка

файлы шрифтов из fonts.gstatic.com следует кэшировать

..

Если ваша проблема связана с кодом CSS от fonts.googleapis.com, это не кеширование, тогда вы правы. Но вы также должны задаться вопросом, действительно ли это проблема. С другой стороны, когда ваша проблема связана с файлами шрифтов с fonts.gstatic.com, они не кэшируются, а затем Я ожидаю, что ваши настройки браузера не будут кэшировать.

Если вы хотите отключить HTTP-запрос до fonts.googleapis.com, который не может быть кэширован, вы не должны использовать @import, но напрямую помещаете объявления @font-face в свой код Sass.(Вы можете найти эти объявления, открыв https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,80 в своих браузерах). Обратите внимание, что предыдущее приведет к перегрузке файлов шрифтов при изменении их местоположения на fonts.gstatic.com. Кроме того, Google может использовать код CSS от fonts.googleapis.com, чтобы указать пользователю на самое быстрое место (например, на основе местоположения), чтобы загрузить файл шрифтов (если он уже не кеширован).