Какой наиболее верный способ подключения шрифтов на сайт?

Question

[mydarck]

Есть необходимость подключить на сайт нестандартные шрифты. Думаю взять их из google font's. Но даже там есть несколько вариантов подключения. Какой лучше выбрать? И может шрифты вообще скачать и подключать локально?

Answer 1

[Serj-One]

Локально
www.fontsquirrel.com/tools/webfont-generator

@font-face {
    font-family: 'Play';
    src: url('../fonts/play-regular-webfont.eot');
    src: url('../fonts/play-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/play-regular-webfont.woff2') format('woff2'),
         url('../fonts/play-regular-webfont.woff') format('woff'),
         url('../fonts/play-regular-webfont.ttf') format('truetype'),
         url('../fonts/play-regular-webfont.svg#playregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Comments

[mydarck]

Меня единственное, что смущает. Получиться оч. длинная пеленка если подключать Play Bold, Play Thin и т. д.

[Serj-One]

mydarck: Это совершенно не должно вас смущать.

[mydarck]

Serj-One: Ясно. Прекратил смущение ))

Answer 2

[Илья Савинков]

Конечно, лучше локально хранить их. Я подключаю через css, можно ещё через javascript, но оно того не стоит

Comments

[Нерон Лордов]

@Logos_Intellect
А почему лучше локально? Я не верстальщик, но почему-то думал, что надежнее подключать через гуглофонтс. Гугл, всё-таки, не подведет.

[mydarck]

Liquidos: Да гугл не должен подвести, но тут все же, наверно, вопрос в скорости загрузки.

[Илья Савинков]

Liquidos: Всё верно, здесь стоит вопрос в скорости загрузки и, если на то пошло, в безопасности. Я не очень хорошо отношусь к кросдоменным запросам на другие источники, пусть даже и проверенные)) К тому же Google Fonts подключает много не нужных вещей для поддержки старых бразуеров, на мой взгляд поддержка форматов woff и woff 2 на очень высоком уровне caniuse.com/#search=woff и нужно использовать только их

[Serj-One]

Logos_Intellect:
Что за бред?
Плюс локального подключения в максимальной кроссбраузерности и возможности максимально обрезать шрифт в зависимости от используемых символов. Кроме того, распространённых шрифтов (по крайней мере в моей практике) в Google Fonts - кот наплакал.
В остальном:
>> "здесь стоит вопрос в скорости загрузки" - Распространённые шрифты из Google Fonts с большой долей вероятности уже лежат в кэше браузера пользователя, и не загружаются вообще. В скорости загрузки этот способ, естественно, только выигрывает.
>> "К тому же Google Fonts подключает много не нужных вещей для поддержки старых бразуеров" - Как раз таки нет, он отдаёт woff2 или woff (IE9+). Для устаревших браузеров у него ничего нет. Именно поэтому в ручном подключении используются eot и svg.
Кроме того, в подключении "ненужных вещей", ничего страшного нет, т.к. браузер не загружает все форматы, он загружает только первый шрифт, который может отобразить.

Не нужно давать советы, не изучив вопрос.

Answer 3

[Freddi]

Лучше css гугл подключаю так

для локального хранения пользовался www.fontsquirrel.com/tools/webfont-generator
он и css и шрифты генерит из нужных