#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");
}
Related
Created a website on wordpress and added a plugin 'Superfly Menu'. It allows custom css so I added the below code to use a custom font but it does not work on mobile.
#font-face {
font-family: 'Town10Display-Bold';
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.ttf') format('ttf');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff') format('woff');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff2') format('woff2');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.eot') format('eot');
}
.sfm-va-middle {
font-family: "Town10Display-Bold";
}
I even tried using media queries...
#media only screen and (min-width: 768px) {
#font-face {
font-family: 'Town10Display-Bold';
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.ttf') format('ttf');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff') format('woff');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.woff2') format('woff2');
src: url('/wp-content/themes/Divi/fonts/Town10Display-Bold.eot') format('eot');
}
.sfm-va-middle {
font-family: 'Town10Display-Bold';
}
the link for the website is www.ambrosekoffee.co.uk
Thanks in advance
I need to use a custom font in my email templates and #font-face looks like the only viable option.
In the previous version of the template there was ProximaNova
#font-face {
font-family: ProximaNova;
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot);
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.eot?#iefix) format('embedded-opentype'), url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-regular-webfont-webfont.woff) format('woff');
font-weight: 400;
font-style: normal
}
#font-face {
font-family: ProximaNova;
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot);
src: url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.eot?#iefix) format('embedded-opentype'), url(https://cdn.auth0.com/fonts/proxima-nova/proximanova-semibold-webfont-webfont.woff) format('woff');
font-weight: 600;
font-style: normal
}
Now I need to replace it with Manrope https://fonts.google.com/specimen/Manrope?sidebar.open=true&selection.family=Manrope but there is no instructions how to use it in #font-face.
You can download the Manrope font family zip from google, extract the Manrope-VariableFont_wght.ttf file and place it in you css folder.
Then in your stylesheet simply add:
#font-face {
font-family: 'manrope';
src: url('Manrope-VariableFont_wght.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
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 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;
}