Проблема:
- Скачанный веб-шрифт из шрифта squirrel
- добавил шрифты в новый файл css с семейством шрифтов, src, font-weight, font-style
- попытался применить его к моемуheader
- проверил мой веб-браузер, шрифт изменился на шрифт по умолчанию, но не на тот шрифт, который я хотел
Вещи, которые я пробовал
- несколько раз пересмотрел мой код
- загрузилснова webfontkit с другими форматами .ttf и .svg файл index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first-->
<meta charset="utf-8" />
<meta name= "viewport" content="width=device-width, initial-scale=1" />
<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="css/styles.css" />
<!-- endbuild -->
<title>DEVEDAN: A Digital Marketing Agency</title>
</head>
<body>
<!--I hid the Navbar code because it was irrelevant-->
<!--WEBSITE CONTENT-->
<!-- Page content holder -->
<div class="page-content p-5" id="content">
<!-- Heading -->
<h2 class="display-4 text-white">DEVEDAN</h2>
<p class="lead text-white mb-0">Develop your business w/ Edson & Angelika</p>
<div class="separator"></div>
</div>
<!--I hid the jscode because it was irrelevant-->
</body>
</html>
файл fonts.css
@font-face {
font-family: 'siffonOutline';
src: url('fonts/siffonoutline-webfont.eot');
src: url('fonts/siffonoutline-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/siffonoutline-webfont.woff2') format('woff2'),
url('fonts/siffonoutline-webfont.woff') format('woff'),
url('fonts/siffonoutline-webfont.ttf') format('truetype'),
url('fonts/siffonoutline-webfont.svg#sifonnbasic_outline') format('svg');
font-weight: normal;
font-style: normal;
}
файл styles.css
/*Fonts*/
@import "fonts.css";
/*NAVBAR*/
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
/*WEBSITE CONTENT*/
h2 {
font-family: 'siffonOutline';
}
body {
background: #599fd9;
background: -webkit-linear-gradient(to right, #599fd9, #c2e59c);
background: linear-gradient(to right, #599fd9, #c2e59c);
min-height: 100vh;
overflow-x: hidden;
}
.separator {
margin: 3rem 0;
border-bottom: 1px dashed #fff;
}
Нажмите на ссылку, чтобы просмотреть вывод моего кода: https://i.stack.imgur.com/ePLCh.png]