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

Question

[Danya Wyse]

Я считаю , что локальное подключение самое надежное
Я поступаю так
в index.html задаю путь до файла со шрифтами
код в шрифтах у меня примерно такой

@font-face {
	font-family:'Dokdo', cursive;
	src:url(../fonts/Dokdo/Dokdo-Regular.ttf);
}

жду критики и реально полезных советов

Answer 1

[Антон Усачев]

Я тоже за локальное размещение шрифтов. (Да, бывает, что гугль недоступен, и шрифты не идут с адреса гугль-фонтс).
Однако рекомендую обработать ttf или otf программкой типа этой, и подключить получившийся цсс.

Comments

[Danya Wyse]

Нельзя как то сразу несколько файлов закинуть?

[Danya Wyse]

https://transfonter.org Сразу несколько файлов разрешает пихануть , и все в один css файл делает

[Антон Усачев]

Даниил Вайс, да, все верно. Все эти файлы шрифтов так или иначе являются фоллбэками для разных браузеров. Так что все так и должно быть.

[Антон Усачев]

Но пихать реально нужно по одному.) В хорошем проекте редко бывает больше 4 шрифтов. Так что готовьтесь потратить какое-то время на старте на эту тягомотину.

[Антон Усачев]

Даниил Вайс, вот так примерно у меня выглядит стандартный шрифтовый цсс под проект. Обратите внимание на то, что я делаю удобные МНЕ наименования для шрифта и играю только с начертанием.

@font-face {
	font-family: 'cmr';
	src: url('Montserrat-Regular?#iefix') format('embedded-opentype'), url('Montserrat-Regular.otf') format('opentype'),
		url('Montserrat-Regular.woff') format('woff'), url('Montserrat-Regular.ttf') format('truetype'), url('Montserrat-Regular.svg#StandardCTStencil-Bold') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'ssb';
	src: url('StandardCTStencil-Bold.eot?#iefix') format('embedded-opentype'), url('StandardCTStencil-Bold.otf') format('opentype'),
		url('StandardCTStencil-Bold.woff') format('woff'), url('StandardCTStencil-Bold.ttf') format('truetype'), url('StandardCTStencil-Bold.svg#StandardCTStencil-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'tds';
	src: url('Tele2DisplaySerif-Bold.eot?#iefix') format('embedded-opentype'), url('Tele2DisplaySerif-Bold.otf') format('opentype'),
		url('Tele2DisplaySerif-Bold.woff') format('woff'), url('Tele2DisplaySerif-Bold.ttf') format('truetype'), url('Tele2DisplaySerif-Bold.svg#Tele2DisplaySerif-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'tds';
	src: url('Tele2DisplaySerif-Regular.eot?#iefix') format('embedded-opentype'), url('Tele2DisplaySerif-Regular.otf') format('opentype'),
		url('Tele2DisplaySerif-Regular.woff') format('woff'), url('Tele2DisplaySerif-Regular.ttf') format('truetype'), url('Tele2DisplaySerif-Regular.svg#Tele2DisplaySerif-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'tts';
	src: url('Tele2TextSans-Bold.eot?#iefix') format('embedded-opentype'), url('Tele2TextSans-Bold.otf') format('opentype'),
		url('Tele2TextSans-Bold.woff') format('woff'), url('Tele2TextSans-Bold.ttf') format('truetype'), url('Tele2TextSans-Bold.svg#Tele2TextSans-Bold') format('svg');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'tts';
	src: url('Tele2TextSans-Regular.eot?#iefix') format('embedded-opentype'), url('Tele2TextSans-Regular.otf') format('opentype'),
		url('Tele2TextSans-Regular.woff') format('woff'), url('Tele2TextSans-Regular.ttf') format('truetype'), url('Tele2TextSans-Regular.svg#Tele2TextSans-Regular') format('svg');
	font-weight: 400;
	font-style: normal;
}

[Danya Wyse]

Антон Усачев, Понял , еще подскажите кое что в этой теме пожалуйста (https://toster.ru/q/620639) как правильно вставить этот бекграунд ? Одним изображением или как?

[Антон Усачев]

Даниил Вайс, тема недоступна, не найдена. 404

[Антон Усачев]

Даниил Вайс, по ссылке не перешел, нашел вопрос сам. Отвечу там же.