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.
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'); }