Есть ли смысл добавлять шрифт в локальное хранилище?

Question

[weranda]

Приветствую

Есть два шрифта в base64 и есть два варианта их добавления:

1. При первой загрузки сайта добавляем шрифт в локальное хранилище через JS или PHP. Затем тянем его при рендеринге других из страниц из локального хранилища.
   
2. Не паримся вообще о локальном хранилище и добавляем в HEAD файл стилей со шрифтом в base64 и при загрузке других страниц он уже будет браться из кеша
   

Что в первом, что во втором случае все равно будет тянуться кусок кода, два запроса.
Шо то ..., шо это ... (© Бредор)

Каие преимущества и недостатки у этих вариантов и что порекомендуете?

Comments

[Froggyweb]

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

Answer 1

[iBird Rose]

В том то и дело что нет смысла в первом варианте, если при варианте 2 - он итак будет у пользователя в кеше браузера.
Есть 3 вариант - использовать шрифты из https://fonts.google.com/
Плюс этого способа по сравнению со вторым в том, что шрифт может оказаться в кеше у пользователя еще до посещения вашего сайта. Потому что на другом сайте, где был пользователь - уже грузился тот же шрифт из гугл фонтс.

Answer 2

[dom1n1k]

Использовать base64 для шрифтов (в отличие от картинок) - затея не очень хорошая.

Comments

[weranda]

Пояните пожалуйста свою мысль.

[dom1n1k]

1. Формат base64 раздувает размер сам по себе (на 30% если память не подводит). Для пары кб иконок это не страшно, но шрифты весят больше на порядок.
2. Растёт объем css, а его загрузка блокирует отрисовку.
3. (главное) Нужно поддержать 2 формата - woff и woff2. Второй компактнее, но не все браузеры его поддерживают. Что будете пихать в css? Если новый woff2 - старые браузеры его не поймут. Если woff - все поймут, но современные браузеры (а их большинство) будут вынуждены скачать на 20-30% трафа больше, чем если бы им дали woff2.

Внедрять в CSS шрифты не стоит. Исключение может составлять небольшой "критический" шрифт для прорисовки первого экрана. Одно начертание и бывает даже с урезанным набором символов. А всё остальное как обычно.