Правильное подключение сторонних шрифтов

[SnowSilver]

Всем привет! Подскажите с подключением сторонних шрифтов...

1. Предположим мне надо подключит какой то шрифт с разными начертаниями, могу ли я использовать одно имя шрифта в font-family, будет ли в таком случае использоваться правильное - подключенное начертание в зависимости от font-weight ?

2. Проверить, есть ли шрифт в системе(чтоб его не грузить лишний раз), можно с помощью local, такого перечисления думаю достаточно, чтоб наверника проверить:
local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin') ?

Я подключаю так(для каждого начертания через тире указано начертание):

 @font-face {
    font-family: "Roboto-Thin";
    src: local('Roboto Thin'), local('RobotoThin'), local('Roboto-Thin'), 
         '/fonts/Roboto-Thin.woff2' format('woff2'),
         '/fonts/Roboto-Thin.woff' format('woff');
    font-weight: 100;
    font-style: normal;
} 

@font-face {
    font-family: "Roboto-Light";
    src: local('RobotoLight'), local('Roboto Light'), local('Roboto-Light'), 
         '/fonts/Roboto-Light.woff2' format('woff2'),
         '/fonts/Roboto-Light.woff' format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Regular";
    src: local('RobotoRegular'), local('Roboto Regular'), local('Roboto-Regular'), 
         '/fonts/Roboto-Regular.woff2' format('woff2'),
         '/fonts/Roboto-Regular.woff' format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto-Black";
    src: local('RobotoBlack'), local('Roboto Black'), local('Roboto-Black'), 
         '/fonts/Roboto-Black.woff2' format('woff2'),
         '/fonts/Roboto-Black.woff' format('woff');
    font-weight: 900;
    font-style: normal;
}

 

Edited June 3, 2018 by SnowSilver

[Alexej]

https://fontstorage.com/blog/about-font-face-part-two/
https://fontstorage.com/blog/about-font-face-part-one/

[SnowSilver]

1 час назад, Alexej сказал:

https://fontstorage.com/blog/about-font-face-part-two/
https://fontstorage.com/blog/about-font-face-part-one/

С первым пунктом понятно, спасибо!

А вот по поводу local()

В статье: 

Цитата

 

Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.

Вот такая запись font-face проверит наличие шрифта на компьютере:

@font-face {
    font-family: 'PT Sans';
    src: url('ptsans.eot');
    src: local('PT Sans'), local('PTSans-Regular'), 
         url('ptsans.eot?#iefix') format('embedded-opentype'),
         url('ptsans.woff') format('woff');
}

 

То есть в первом local указываем просто наименование шрифта для любого начертания, например для Roboto это и будет local('Roboto'), а под PostScript Name - подразумевается имя шрифта + его начертание через тире, например для Roboto жирного начертания будет local('Roboto-Black') - верно?

Можно встретить разные варианты, где то можно увидеть такой вариант: 

@font-face {
    font-family: Journal;
    src: local(JournalRegular), local("Journal Regular"),
		 url(journal-webfont-regular.woff);
	font-style: normal;
	font-weight: normal;
}

то есть в local пишется не просто именование шрифта, а сразу начертание "JournalRegular"...

Edited June 3, 2018 by SnowSilver

[Alexej]

1 час назад, SnowSilver сказал:

С первым пунктом понятно, спасибо!

А вот по поводу local()

В статье: 

То есть в первом local указываем просто наименование шрифта для любого начертания, например для Roboto это и будет local('Roboto'), а под PostScript Name - подразумевается имя шрифта + его начертание через тире, например для Roboto жирного начертания будет local('Roboto-Black') - верно?

Можно встретить разные варианты, где то можно увидеть такой вариант: 

@font-face {
    font-family: Journal;
    src: local(JournalRegular), local("Journal Regular"),
		 url(journal-webfont-regular.woff);
	font-style: normal;
	font-weight: normal;
}

то есть в local пишется не просто именование шрифта, а сразу начертание "JournalRegular"...

Ну я делаю local без начертания и с начертанием. А как писать с пробелом или с _ или же - я не знаю.... В локал обычно пишу так как шрифт называется в google fonts или захожу в папку с шрифтами винде и смотрю в столбец "семья" как там написано так и подключаю. 

 

 

 

Цитата

но насколько я знаю после установки шрифта в ОС он устанавливается как один шрифт с одним именем то есть в нашем случае Roboto а все остальные как то этому шрифту прикрепляются поэтому думаю не стоит даже писать про начертание в local хотя нужно пойти в спеку и уточнить что именно делает local  берет семью или название файла шрифта. Не знаю как все работает но винде если вы откройте (по крайней мере у меня так) то там нет начертания в отдельных файлах все начертания прикрепляются к одному семейству шрифтов поэтому не совсем все понятно. 

 

Edited June 3, 2018 by Alexej

[SnowSilver]

5 часов назад, Alexej сказал:

Ну я делаю local без начертания и с начертанием. А как писать с пробелом или с _ или же - я не знаю.... В локал обычно пишу так как шрифт называется в google fonts или захожу в папку с шрифтами винде и смотрю в столбец "семья" как там написано так и подключаю. 

 

 

 

 

Первый local это полное наименование шрифта, а второй local это похоже его PostScript Name. Вроде для шрифтов он гуглится без проблем... 

 

Но что есть  такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

[Alexej]

10 часов назад, SnowSilver сказал:

Первый local это полное наименование шрифта, а второй local это похоже его PostScript Name. Вроде для шрифтов он гуглится без проблем... 

 

Но что есть  такое "PostScript Name"...? что то затрудняюсь найти информацию на сей счет

Наверное это нужно если семейство шрифта есть у пользователя но нет той что нужно начертании.... 

[SnowSilver]

37 минут назад, Alexej сказал:

Наверное это нужно если семейство шрифта есть у пользователя но нет той что нужно начертании.... 

Только вот в первом local как раз таки указывают полное наименование шрифта, например local('Roboto Black') - в том числе начертание... 

А вот второй будет local('Roboto-Black')