I want to use fontlero font for my page and I downloaded the .ttf file. And I include it in my main CSS but this gave me some other font. here is my css code:
#font-face {
font-family: FONTLERO;
src: url(fonts/FONTLERO.TTF);
}
.customfont {
font-family: "FONTLERO";
src: url('../fonts/FONTLERO.TTF') format('embedded-opentype'),
url('../fonts/FONTLERO.TTF') format('opentype');
}
.story h1 {
font-family: FONTLERO;
font-size: 120px;
}
Path should be inside the CSS folder like below
css/fonts/FONTLERO.TTF
Related
I have some custom fonts in my project and reference them by using #font-face.
But when the SASS is compiled the src gets all wrong, pointing to the original folder. I want it to point to the current folder where the CSS file is.
SASS:
#font-face {
font-family: Default;
src: url("Poppins-Medium.ttf");
}
#font-face {
font-family: Regular;
src: url("Poppips-Regular.ttf");
}
#font-face {
font-family: SemiBold;
src: url("Poppins-SemiBold.ttf");
}
#font-face {
font-family: Bold;
src: url("Poppins-Black.ttf");
}
Compiled SASS:
#font-face {
font-family: Default;
src: url("../../STYLE/Layout/Poppins-Medium.ttf"); }
#font-face {
font-family: Regular;
src: url("../../STYLE/Layout/Poppips-Regular.ttf"); }
#font-face {
font-family: SemiBold;
src: url("../../STYLE/Layout/Poppins-SemiBold.ttf"); }
#font-face {
font-family: Bold;
src: url("../../STYLE/Layout/Poppins-Black.ttf"); }
I want the source to be "Poppins-Black.ttf", since they are in the same folder.
I ended up copying the font files to the build folder and reference them from there,
I am using #font-face like this:
#font-face {
font-family: DINPro;
font-weight: bold;
src: url(../res/fonts/DINPro-Bold.otf) format("opentype");
}
#font-face {
font-family: DINPro;
src: url(../res/fonts/DINPro-Regular.otf) format("opentype");
}
#font-face {
font-family: DFLiHei;
src: url(../res/fonts/DFLiHei-Regular.ttf) format('truetype');
}
h1{
font-family: DFLiHei !important;
}
But not working.
My folder structure is likely:
/index.html
/css/style.css
/res/fonts/DINPro-Bold.otf
/res/fonts/DINPro-Regular.otf
/res/fonts/DFLiHei-Regular.ttf
Therefore, I think wrong directory is not my problem.
Also, not only fail in special browser, but also in chrome and mobile.
Any idea?
Convert ttf to woff format
Try this
#font-face {
font-family: DFLiHei;
src: url(../res/fonts/DFLiHei-Regular.woff) format('woff');
}
It will work in all browsers
I downloaded a new font and stores in in ${RootFolder}/font.
In styles.css file I wrote:
#font-face {
font-family: roboto;
url('../fonts/Roboto-Italic.ttf');
}
h1 {
font-family: roboto;
}
In html I wrote:
<h1> hello </h1>
And still I don't see that font has changed.
Do you know what I did wrong?
Try using it like this:
#font-face {
font-family: "roboto";
src: url('fonts/Roboto-Italic.ttf');
}
h1 {
font-family: roboto;
}
Use google fonts https://fonts.google.com/specimen/Roboto
Just import this into the css. Replace the #font-face with:
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
And use like font-family: roboto;
in your font-face add src: url('../fonts/Roboto-Italic.ttf'); instead of url('../fonts/Roboto-Italic.ttf');
https://www.w3schools.com/CSSref/css3_pr_font-face_rule.asp
I can't load font awesome in fonts directory, in font awesome there is icon style like :
.fa-star:before {
content: "\f005";
}
I want to get content: "\f005"; and put in my own style, but I think the directory fonts not load, how to load font awesome file in directory fonts?
I have try to add this code to my style:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
and copy fonts folder.
here my style code:
.example li a:before {
float: left;
font-size: 10px;
content: "\f005";
}
here my directory structure
- assets
-- css
mystyle.css
-- fonts
FontAwesome.otf
fontawesome-webfont.eot
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
just add font-family for your custom class
.fa-star{
font-family: 'FontAwesome';
}
.fa-star:before {
content: "\f005";
}
I have a problem importing a font to my CSS file, and I can't understand the problem.
The code:
#font-face {
font-family: 'Reg';
font-style: normal;
font-weight: 400;
src: local('Reg'), url(carmelit.ttf) format('ttf');
}
body{
font-family: 'Reg';
}
This is not working, and not because I'm overriding it later on. The file "carmelit.ttf" is in the same folder as the CSS file.
format('ttf') should be format('truetype')
You can also remove the local info unless you're supporting ancient versions of IE.
You should also try like this:
#font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}