Эти шрифты, вероятно, работают на вашем Windows, потому что они установлены на вашем компьютере. Для поддержки пользовательских шрифтов для всех (и других ваших устройств) вы должны загрузить их на свой веб-сайт.
Предоставленные вами шрифты являются лицензионными, и, насколько я знаю, они требуют от вас платить деньги, чтобы использовать их на законных основаниях. Так что для моего примера я буду использовать Roboto .
Помните, что после загрузки шрифта вы все равно должны применить их в своем CSS:
body {
font-family: 'Roboto', sans-serif;
}
Внешние шрифты
Внешние шрифты - это шрифты, размещенные на внешних сайтах и импортированные на ваш сайт. Отличное место для поиска бесплатных внешних шрифтов - Google Fonts .
Есть два способа импортировать внешние шрифты.
Вы можете импортировать его в свою голову HTML следующим образом:
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
Или внутри вашего CSS, используя import
примерно так:
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
Внутренние шрифты
Внутренние шрифты размещаются вами самостоятельно. Вам потребуется разместить файлы шрифтов на веб-сайте и использовать правило font-face
для их загрузки следующим образом:
@font-face {
font-family: 'Roboto';
src: url('roboto.eot'); /* IE9 Compat Modes */
src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto.woff') format('woff'), /* Modern Browsers */
url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}