Open-sans, оптимизация шрифта, как реализовать?

Question

[Антон Вебсайтовский]

Здравствуйте, делаю оптимизацию сайта.

Подгрузка шрифта происходила с гугла, я скачал шрифт open sans, посмотрел сколько весят файлы, чет много выходит, как произвести оптимизацию???



Простановка галочек на языки, на объем файлов не влияет.


Но думаю лучше все галочки поставить.

OpenSans-Light.ttf - можно удалить, 300 я не использую.
ну и 800, тож ни когда не использовал, но если ставить b или strong, он же по идее подставляет 800 OpenSans-ExtraBold.ttf

Что советуете оставить, OpenSans-Regular.ttf и OpenSans-SemiBold.ttf.

Comments

[alex-1917]

Extended-то зачем?))) Там символы, которые необходимы на одном сайте из двух миллиардов
#ятяумоляю #обожимой

[Moskus]

Антон Вебсайтовский

Но думаю лучше все галочки поставить.

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

[Антон Вебсайтовский]

alex-1917, так от этого объем файлов не изменяется, по этому я все и поставил.
Поставлю значит нужные. 2

[Антон Вебсайтовский]

Moskus, так от этого объем файлов не изменяется, по этому я все и поставил.
Поставлю значит нужные. 2

Answer 1

[Евгений Мягких]

Антон, чтобы снизить вес шрифтов, нужно конвертировать их в формат woff2 и woff. После чего последовательно подключить. Сначала woff2, потом woff и в конце ttf.

Снизите вес примерно раза в 3.

Comments

[tyzberd]

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

[Антон Вебсайтовский]

так что как было с гугла лучше?

[Антон Вебсайтовский]

с гугла так подгружал

fonts.googleapis.com/css?family=Noto+Sans&subset=c...

[Александр]

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

[tyzberd]

так что как было с гугла лучше?

я считаю, что да. Гугл возвращает только нужный формат, например только ttf2 для хрома.
Правда не знаю как у него с ttf и eot или он их возвращает
а стилями вам нужно будет подключить минимум
.woff2 /* Chrome 26+, Opera 23+, Firefox 39+ */
.woff /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+ если пользователь был на сайте с подключенным таким шрифтом с гугла, он уже есть в кэше браузера.
минус только в доступности сервера гугла.

[Александр]

Nikolay Petyukh, а что мешает хранить эти шрифты у себя на сервере?

[Александр]

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

[Александр]

Nikolay Petyukh, если шрифт на сайте сбрасывается на sans-serif, а использовался Roboto или схожий по высоте, оформление начинает выглядеть непрофессионально, отступы едут. Это может создать у пользователя ощущение дешевезны и подделки, а значит потенциальный лид может уйти. Было. Плавали.
Вина за незагруженный шрифт - это исключительно вина верстальщика, но никак не дизайнера. А вот если в шаблоне используется больше трех разных шрифтов - другой вопрос.

[Антон Вебсайтовский]

Александр, вообще, да, у меня было такое, но очень редко.

[Антон Вебсайтовский]

tyzberd, у меня щас сделано так

body,
html {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  height: 100%;
  font-weight: 400;
  color: #000;
  background: #fff
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('opensans/opensans-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('opensans/opensans-regular.woff') format('woff'), /* Modern Browsers */
    url('opensans/opensans-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('opensans/opensans-semibold.woff2') format('woff2'), /* Super Modern Browsers */
    url('opensans/opensans-semibold.woff') format('woff'), /* Modern Browsers */
    url('opensans/opensans-semibold.ttf') format('truetype'), /* Safari, Android, iOS */
}

url('opensans/opensans-semibold.ttf') format('truetype'), /* Safari, Android, iOS */ убираем значит?

[Антон Вебсайтовский]

Nikolay Petyukh, фоллбэки что это?

[Антон Вебсайтовский]

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

[Антон Вебсайтовский]

Nikolay Petyukh, у меня с этим проблем нет, я уже проверял, ничего не ломается, если в друг проблема со шрифтом.

Answer 2

[Dymok]

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

Comments

[Антон Вебсайтовский]

Что лучше выбрать? оптимал или экперт или бесик.

[Антон Вебсайтовский]

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

html {
font-family: 'open sans', Arial, sans-serif;
font-size: 14px;
height: 100%;
font-weight: 400;
color: #000;
background: #fff
}

и он подгружает опен санс, а от куда? странно.

Answer 3

[tyzberd]

Недоступность заданного значения

Comments

[Антон Вебсайтовский]

Значения знаю ! я использую 400 и 600, суть вопроса была не в этом.

[tyzberd]

суть вопроса была не в этом.

а в чем.

но если ставить b или strong, он же по идее подставляет 800

ну так он выберет ваш шрифт с 600, в чем проблема.

OpenSans-Regular.ttf и OpenSans-SemiBold.ttf.

оставляйте, тогда будет SemiBold для strong

Answer 4

[Михаил]

Скачайте нужные форматы как правило под современные браузеры woff и woff2 они весят поменьше. Удобный сервис для скачки шрифтов с google fonts

Comments

[Антон Вебсайтовский]

Там смотрю два варианта опен санс, какой лучше?

[Антон Вебсайтовский]

я бы не сказал что мало весят

[Михаил]

Антон Вебсайтовский, woff2 61кб по сравнению с ttf в 216, это ощутимая разница

[Антон Вебсайтовский]

Olek1, с гугла подгрузка идет, скачав от туда шрифты, я понял что они весят не хило.

[Антон Вебсайтовский]

Михаил, а то что я с гугла подгружаю это плохо?

$this->template->styles[] =
'https://fonts.googleapis.com/css?family=Open+Sans:..." rel="stylesheet';

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

[Михаил]

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

[Johny Smith]

Антон Вебсайтовский,

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

они чаще всего наверное находятся у всех в темпе, проверьте где нибудь этот факт статистически

[Антон Вебсайтовский]

есть style.css
в нем

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/opensans/opensans-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('/opensans/opensans-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/opensans/opensans-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('/opensans/opensans-regular.woff') format('woff'), /* Modern Browsers */
    url('/opensans/opensans-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/opensans/opensans-semibold.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('/opensans/opensans-semibold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/opensans/opensans-semibold.woff2') format('woff2'), /* Super Modern Browsers */
    url('/opensans/opensans-semibold.woff') format('woff'), /* Modern Browsers */
    url('/opensans/opensans-semibold.ttf') format('truetype'), /* Safari, Android, iOS */
}

а шрифты в папке /opensans/
вот только чет не подгружает.
или я понять не могу, вроде кеш браузера чищу.

[Антон Вебсайтовский]

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

[tyzberd]

вот только чет не подгружает.

смотрите в консоль и вкладку network там будет видно откуда шрифт тянет

[Антон Вебсайтовский]

Антон Вебсайтовский, все шрифты подгрузил, убрал в путях /
/opensans/opensans-semibold.ttf
сделал так
opensans/opensans-semibold.ttf

подгрузилось.

[Антон Вебсайтовский]

tyzberd, точно. я и забыл.

теперь понять вот это:
он все сразу грузит?, для ie eot, для современных браузеров woff2 - woff, для более старых ttf.
или он определяет какой браузер и подгружает то что ему надо, если с ie зашел старой версии, то он загрузит только .eot, я прав? или похер ему и он все грузить будет.

[tyzberd]

точно. я и забыл.

он все сразу грузит?

это в консоли тоже смотрите.

[Антон Вебсайтовский]

Для ie9 думаю убрать, так как его вроде вообще ни у кого уже и нет.
вообще стоит так font-family: 'Open Sans', Arial, sans-serif;
если опен санс не грузится где-то, то применяется второй стиль Arial.

[Антон Вебсайтовский]

Я оставил:

body,
html {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 14px;
  height: 100%;
  font-weight: 400;
  color: #000;
  background: #fff
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('opensans/opensans-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('opensans/opensans-regular.woff') format('woff'), /* Modern Browsers */
    url('opensans/opensans-regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('opensans/opensans-semibold.woff2') format('woff2'), /* Super Modern Browsers */
    url('opensans/opensans-semibold.woff') format('woff'), /* Modern Browsers */
    url('opensans/opensans-semibold.ttf') format('truetype'), /* Safari, Android, iOS */
}

и вес такой: в районе 150 килобайт

[tyzberd]

кстати ошибочка, при наличии format браузер грузит только первый, который может отобразить

[Антон Вебсайтовский]

tyzberd, не совсем понял, где именно ошибка и как исправить.

[tyzberd]

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

[Антон Вебсайтовский]

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