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'); }
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 following HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#font-face {
font-family: "TD Graphik SemiLight";
src: url("https://tdloyalty.s3.amazonaws.com/web-fonts/TDGraphik-Semilight-Web.eot");
src: url("https://tdloyalty.s3.amazonaws.com/web-fonts/TDGraphik-Semilight-Web.eot?#iefix")
format("embedded-opentype"),
url("https://tdloyalty.s3.amazonaws.com/web-fonts/TDGraphik-Semilight-Web.woff2")
format("woff2"),
url("https://tdloyalty.s3.amazonaws.com/web-fonts/TDGraphik-Semilight-Web.woff")
format("woff");
font-weight: normal;
font-style: normal;
}
body {
font-family: 'TD Graphik SemiLight';
}
</style>
</head>
<body>
<p>A sentence with spaces 29.00 %</p>
</body>
</html>
Why do I see a quotation mark between the number zero and the percentage sign even though I just used a space? Problem doesn't occur if I use a different font family.
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'm trying to load a custom font from [DaFont.com (CaviarDreams)][1], with #font-face in css. I use this: https://www.fontsquirrel.com/tools/webfont-generator and I get this in css:
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 13, 2018 */
#font-face {
font-family: 'caviar';
src: url('font/caviardreams-webfont.eot');
src: url('font/caviardreams-webfont.eot?#iefix') format('embedded-opentype'),
src: url('font/caviardreams-webfont.woff2') format('woff2'),
src: url('font/caviardreams-webfont.woff') format('woff'),
src: url('font/caviardreams-webfont.svg#caviar_dreamsregular') format('svg');
font-weight: normal;
font-style: normal;
}
p {
font-size:40px;
font-family:caviar;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>test</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
</head>
<body>
<p>test<p>
</body>
</html>
But it don't work!
(edited)
Can you help me?
So after testing it on my site I have found a few issues:
Your css class for p is not correct.
In the font url list you have comma separeeted insted of semicolumn
I have tried the same steps as you have, and get only woff and woff2 files. (So you need to remove the eot,svg paths from css)
My code fo one example:
<style>
#font-face {
font-family: 'caviar';
src: url('font/caviardreams-webfont.woff2') format('woff2');
src: url('font/caviardreams-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
p{
font-family:caviar;
font-weight:normal;
font-style:normal;
}
</style>
<div>
<p>Test</p>
</div>
Hope this helps,
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');
}