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');
}
Related
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>
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>
Can someone tell me what to put in my css file to install a font named "Burbank.otf" and what to put in the html to make the text in that font
I have this in HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<h1>Hey, June</h1>
</body>
</head>
</html>
<html>
<head>
<title>Test</title>
</head>
And this in CSS:
#font-face { font-family: Junebug; src: url('Burbank.otf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
You are selecting the class .junebug in your css file, but there isn't any html tag with a class like that.
Your CSS:
#font-face { font-family: Junebug; src: url('Burbank.otf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
Give an html tag the class junebug eg:
<h1 class="junebug">Hey, June</h1>
you can use it simply like this :
#font-face {
font-family: Burbank.otf ;
src: "url from the font"
}
your cla{
font-family: Burbank.otf;
}
I hope this will help .
If your font is in the same folder of the HTML you can use this css:
#font-face {
font-family:'Burbank';
src: url('Burbank.otf') format('opentype');
font-style: normal;
font-weight: normal;
}
.junebug { font-family: Burbank; font-size: 4.2em; }
To make it works you need to use the same font-family name as the name of the font file.
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'); }