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,
Related
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
I have downloaded .ttf files from google fonts to my local css folder, but can't seem to load them properly. I have tried these approaches:
CSS
#import url('./css/css?family=Cabin+Condensed:400,500,600,700');
#font-face {
font-family: 'Cabin Condensed';
font-style: normal;
font-weight: 700;
src: local('Cabin Condensed') format('truetype');
}
body, html {
font-family: 'Cabin Condensed', sans-serif;
}
HTML
<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">
I don't get any errors, but the font is not displayed either.
Strangely, the official docs don't even mention local fonts.
Seems to me the problem is using the local path which requires the font to be installed locally.
Try dropping the #import and add a fallback of src: url to your src: local:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url(<path to the TTF file>);
}
e.g:
#font-face {
font-family: 'Cabin Condensed';
src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}
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 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;
}
#font-face {
font-family: "Gotham";
src: font_path("gotham-rounded-medium.otf") format("opentype");
}
I have this in my CSS file and I still can't fetch the font. Any help?
You need to specify url, also I believe it's font-path, not font_path
#font-face {
font-family: "Gotham";
src: url(font-path("gotham-rounded-medium.otf")) format("opentype");
}
More here: http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/
If the font file is in your assets directory, try
#font-face {
font-family: "Gotham";
src: url('/assets/gotham-rounded-medium.otf') format("opentype");
}
Try
#font-face {
font-family: "Gotham";
src: url("gotham-rounded-medium.otf");
}