Работа с правилом @font-face
div h2 {
text-align: center;
color: white;
padding: 0px 20px 0px 20px;
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 300;
src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/TZlHHgxEfHXA7uKM1eaCjXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/mJrGVjHbrdshrbGyvd7vdaCWcynf_cDxXwCLxiixG1c.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
Я пытаюсь использовать шрифт Google, он также связан в моем HTML-файле следующим образом:
<link href="https://fonts.googleapis.com/css?family=Exo+2:300,400" rel="stylesheet">
К сожалению, после того, как я добавил стиль шрифта, текст не отображается. Что-то не так с тем, как я это делаю?
Спасибо за помощь заранее.
2 ответа
Попробуйте следующий код в верхней части страницы CSS,
@import url(https://fonts.googleapis.com/css?family=Exo+2:300,400);
Затем используйте импортированный шрифт в любом месте на странице CSS, как показано ниже,
body {
font-family: 'Exo 2', sans-serif;
}
Как описано на веб-сайте шрифтов Google, когда вы включили тег ссылки, вы должны указать шрифт
Укажите в CSS
Используйте следующие правила CSS для определения этих семейств:
font-family: 'Exo 2', sans-serif;
Примеры того, как шрифты можно добавлять на веб-страницы, см. В руководстве по началу работы.
Так что в вашем CSS вы просто должны добавить:
.someSelector {
font-family: 'Exo 2', sans-serif;
}