I am loading a Hello World html file in Chrome 95, with a declared #font-face loaded from Google fonts. The font is correctly loading, which I can verify in the Network tab, but for some reason my div is rendering as Times.
What am I doing wrong?
<html>
<div style='font-family:OpenSans-Regular;'>
Hello World!
</div>
</html>
<style>
#font-face {
font-family: OpenSans-Regular;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v27/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSKmu0SC55K5gw.woff2) format('woff2');
}
</style>
From Google fonts document, you should use <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name"> instead of write them directly.
Your <style> element are in wrong place, there are no <body> element in your HTML.
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<style>
* {
font-family: "Open Sans";
}
</style>
</head>
<body>
<div style='font-family:Open Sans'>
Hello World!
</div>
</body>
</html>
Related
I created a folder for all my fonts. Here's my html code:
<!DOCTYPE html>
<html>
<head>
<title>Play with bulb!</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
</head>
<body>
<img id="myImage" onclick="changeImage()" src="images/lightOff.gif">
<h1 id="myText" onclick="changeText()"></h1>
</body>
</html>
And my CSS:
#import url("./fonts/Poppins-ExtraBold.ttf");
#myText {
font-size: 30px;
font-family: 'Poppins';
}
I also have a javascript file, but I'm not giving it as it is unrelated to this question.
For some reason, it isn't showing Poppins. Any reason why it isn't?
I even checked in the inspect tab, and it showed this:
#import is for importing CSS, not font files.
You need #font-face to load a custom font.
#font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
And then you can use it with the name you defined:
#myText {
font-family: 'Open Sans';
}
Try using this css:
#font-face {
font-family: 'Poppins' ;
src: url('./fonts/Poppins-ExtraBold.ttf') format('truetype');
}
#myText {
font-size: 30px;
font-family: 'Poppins';
}
I have the Inter font. I got it from Google Fonts. But It can't be shown. Seems like arrow doesn't see the font. You can see it.
Instead of the same arrow on Google Inter Font page
css:
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Inter', sans-serif;
}
</style>
</head>
html:
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
What is wrong?
if you want to use custom fonts you should copy these fonts to your project folder, after that use this code of CSS to add them to your document
#font-face {
font-family: Inter;
src: url(sansation_light.woff);
}
replace this src with your font address you copy in your project
just use this code:
It's work for me
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">
<style>
body{
font-family: Inter, sans-serif;
}
p {
font-family: verdana;
font-size: 20px;
}
div{
font-family: Inter;
font-weight: 400;
font-style: normal;
font-size:x-large;
}
</style>
</head>
<body>
<div> ↗</div>
<div >Almost before we knew it, we had left the ground. ↗</div>
</body>
</html>
Signika Negative Bold font doesnt work on my html site,
If I try some other fonts it works but with font-family: 'Signika Negative Bold';
it doesnt work
html:
<div id="green">hewhehhwhehwe </div>
css:
#green {
font-family: 'Signika Negative Bold';
}
this is what I have right now
Please Specify font name and specify the URL, like shown below:
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: myFirstFont;
src: url(signika-v8-latin-regular.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<h1>The #font-face Rule</h1>
</body>
</html>
I use below code to load a font with #font-face statement.the font is in my dir yoo, but it dosn't work :
#font-face {
font-family: 'irseri’;
src: url('irseri.ttf') format('truetype');
}
.about{
text-align: left;
font-size: 18px;
font-weight: bold;
font-family:irseri ;
color: #9f9f9f;
margin-top: 10px;
}
and this is my html code :
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="UTF-8">
<title>Mehdi page</title>
</head>
<body>
<div class="content">
<div class="text"><div class="image"></div>Some Title</div>
<div class="about">Some Text<div>
</div>
</body>
</html>
Try this code and make the font folder is correct. check once irseri.ttf font is in folder it may like src: url('../fonts/irseri.ttf') format('truetype');
#font-face {
font-family: 'irseri';
src: url('../irseri.ttf') format('truetype');
}
i have to load font into css from folder, but it is not working
html
is :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#font-face { font-family: 'HelveticaWorld'; font-style: normal; font-weight: bold; src: URL("../Fonts/HelveticaWorld-Bold.ttf") format('ttf'); }
</style>
</head>
<body>
<div style="margin-bottom: 15px; font-weight: bold;font-family: HelveticaWorld"">Setup</div>
</body>
</html>
download physical html file ( zip)
Looking at the zip file, your font path and format are wrong. Try:
#font-face { font-family: 'HelveticaWorld'; font-style: normal; font-weight: bold; src: URL("font/HelveticaWorld-Bold.ttf") format('truetype'); }