Я пытаюсь импортировать шрифты Sofia Pro на сайт. Однако они не загружаются должным образом.
Я пытаюсь использовать веб-шрифты Sofia Pro на своем веб-сайте. Я скачал библиотеку, добавил их в свою таблицу стилей, но она выглядит неправильно. Я также пытался играть со стилем шрифта и весом, но ничего не работает.
Буду очень признателен за любую помощь / предложения / советы! Спасибо!
Для пояснения, вот как они должны выглядеть: ссылка
Вот мои html и css файлы:
@font-face {
src: local(../fonts/Sofia Pro Bold.otf) format("opentype");
font-family: sofia pro bold;
font-weight: normal;
}
@font-face {
src: url(../fonts/Sofia Pro SemiBold.otf) format("opentype");
font-family: sofia pro semibold;
font-weight: normal;
}
@font-face {
src: url(../fonts/Sofia Pro Regular.otf);
font-family: sofia pro reg;
font-weight: normal;
}
/* lightning */
body {
align-items: center;
text-align: left;
justify-content: center;
}
.container {
display: grid;
grid-template-columns: 20% 60% 20%;
}
.content {
grid-column: 2;
}
h1 {
margin-top: 24px;
font-family: "Montserrat", sans-serif;
font-size: 16px;
justify-content:center;
display:flex;
}
/* question */
h2 {
font-family: sofia pro bold, sans-serif;
font-weight: bold;
top: 64px;
font-size: 32px;
margin-bottom: 0px;
}
/* posting title */
h3 {
font-family: "sofia pro semibold", sans-serif;
text-align: left;
margin-top: 16px;
font-size: 18px;
margin-bottom: 0;
}
h4 {
font-family: "sofia pro reg", sans-serif;
font-weight: normal;
margin-top: 8px;
font-size: 12px;
margin-bottom: 24px;
color: #aaaaaa;
}
h5 {
font-family: "sofia pro bold", sans-serif;
font-size: 16px;
margin-bottom: 0px;
margin-top: 0px;
}
h6 {
font-family: "sofia pro reg", sans-serif;
font-weight: normal;
font-size: 12px;
color: #1c5bff;
margin-top: 16px;
margin-bottom: 8px;
}
p {
font-family:"sofia pro reg", sans-serif;
font-weight: normal;
font-size: 12px;
}
.box {
border: 2px solid black;
border-radius: 8px;
padding: 16px;
display: inline-block;
}
.button {
background-color: white;
border: 1px solid #1c5bff;
border-radius: 1px;
text-align: center;
display: inline-block;
font-size: 12px;
font-color: #14ce8b;
font-family: "sofia pro semibold", sans-serif;
padding: 8px;
height: 32px;
width: 90px;
border-radius: 5px;
cursor: pointer;
}
.button1 {
border: 2px solid #4caf50;
color:#4caf50;
}
.button2 {
border: 2px solid #008cba;
color:#008cba;
}
.button3 {
border: 2px solid #f44336;
color:#f44336;
}
/* mobile layout */
@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
body {
width: 100%;
}
.button {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>lightning</title>
<link rel="stylesheet" type="text/css" href="CalHacks.css" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300&display=swap" rel="stylesheet">
</head>
<body>
<h1>lightning</h1>
<div class="container">
<div class="content">
<h2>question</h2>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis
massa mauris. Nunc ut luctus nisi.
</h3>
<h4>asked 30 minutes ago</h4>
<div class="box">
<h5>Lil' Pump</h5>
<h4 style="padding-top:0px; padding-bottom:0px; margin-bottom:0px;">
answered 30 minutes ago
</h4>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis
vestibulum justo. Vivamus in lectus et nibh tempor dapibus. Phasellus
euismod pharetra lectus, in volutpat nisi euismod id. Sed et
consectetur nisl. Nunc varius metus quis consequat finibus. Mauris ac
lacinia ex, at posuere eros. Nullam porttitor nunc id tempus mollis.
Proin in risus in arcu tristique consequat in at velit. Quisque in
facilisis nisi. Fusce quam enim, varius scelerisque nisi ut, hendrerit
aliquet elit. Aenean vitae egestas turpis. Curabitur nisi nisl,
malesuada a risus sit amet, ornare gravida ipsum.
</p>
<p>
Nullam finibus, purus pharetra tempus luctus, neque ex elementum ante,
sed tincidunt sem quam vitae magna. Donec dapibus odio non urna
mattis, a euismod lectus consectetur. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Ut
convallis fringilla ornare. Vivamus molestie cursus dapibus. Fusce
fermentum bibendum ultricies. Sed at sodales libero, eu bibendum
magna.
</p>
<p>
Sed quis malesuada sem. Cras ac velit libero. Phasellus placerat orci
non orci suscipit porta. Vivamus interdum tempor est, vitae
condimentum metus vehicula vel. Sed iaculis est vitae libero gravida
auctor. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Sed nisi tellus, pulvinar et malesuada
egestas, bibendum id lorem. Maecenas tincidunt auctor velit et
lobortis. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Pellentesque semper feugiat nisl,
sed malesuada lacus euismod quis. Phasellus efficitur elit ligula, non
condimentum magna condimentum sed. Phasellus commodo aliquet suscipit.
</p>
<h6>how was Lil' Pump's answer?</h6>
<button class="button button1"> in the money</button>
<button class="button button2">it was great</button>
<button class="button button2">it was fine</button>
<button class="button button3">it was bad</button>
</div>
</div>
</body>
</html>