CSS ile Web Sayfalarına Farklı Fontlar Eklemek
Bir sayfa tasarladınız ve tasarladığınız font standart fontlar içerisinde yoksa yapmanız gereken fontuda karşı browsera yüklemek olacaktır.
Css dosyanızın içersine aşağıdaki örneklerdeki gibi eklemeler yaparak fontları kullanabilirsiniz:
@font-face {
font-family: "OswaldRegular";
src: url(font/Oswald-Regular.ttf) format("truetype");
}
font-family: "OswaldRegular";
src: url(font/Oswald-Regular.ttf) format("truetype");
}
@font-face {
font-family: 'Josefin Sans';
src: url('JosefinSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
font-family: 'Josefin Sans';
src: url('JosefinSans-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Örnek
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="kutu1">Ali okula gel</div>
</body>
</html>
<html>
<head>
<style>
/*@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Playwrite+CO+Guides&display=swap');
*/
@font-face {
font-family: Jost;
src: url(https://fonts.gstatic.com/s/playwritecoguides/v2/AYCXpWvtftIVXepC5AzjAx1KgYPugOK0Tqk.woff2) format('woff2');
}
div {
font-size: 52px;
text-shadow: 5px 25px 10px grey;
font-family: Jost;
color: white;
border:1px solid yellow;
}
body, html {
background:linear-gradient(to bottom,black, #505050);
height: 100%;
}
*/
@font-face {
font-family: Jost;
src: url(https://fonts.gstatic.com/s/playwritecoguides/v2/AYCXpWvtftIVXepC5AzjAx1KgYPugOK0Tqk.woff2) format('woff2');
}
div {
font-size: 52px;
text-shadow: 5px 25px 10px grey;
font-family: Jost;
color: white;
border:1px solid yellow;
}
body, html {
background:linear-gradient(to bottom,black, #505050);
height: 100%;
}
</style>
</head>
<body>
<div class="kutu1">Ali okula gel</div>
</body>
</html>
Yorumunuzu Ekleyin
