I recently started using SASS and I want to import 2 fonts, Montserrat and Open Sans. Normally in CSS, you do something along the lines of
#font-face {
font-family: 'Montserrat'
src: url('../../webfonts/Montserrat.ttf');
}
And it works just fine. If my file structure looks like the following
CSS
Base
typography.sass
Webfonts
Montserrat.ttf
But I put the following code in my SASS file.
#font-face
font-family: 'Montserrat'
src: url("../../webfonts/Montserrat.ttf")
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf")
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
But the font's don't load. I tried similar question on this topic but none of them were succesfull for me. What could this problem be?
If your folder name is Webfonts and you reference it with url("../../webfonts/..., then you have your answer there (lowercase vs. uppercase w/W).
Also, your code example results in a double src attribute. I don't know if it is related to the problem.
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf")
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
The code above compiles to this, where the src overwrites itself for each time:
#font-face {
font-family: "Open Sans";
src: url("../../webfonts/OpenSans.ttf");
src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}
The src attribute should only be set once, but with multiple values instead. I think this will work in Sass:
#font-face
font-family: 'Open Sans'
src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")
Related
I'm trying to figure out why my custom font is not loading on WordPress (MAMP, Mac, localhost).
The fonts are stored in wp-content/themes/twentysixteen/fonts/
Then in wp-content/themes/twentysixteen/style.css I have the following CSS:
#font-face {
font-family: "Averta-Regular";
src: font-url("./fonts/31907B_A_0.eot");
src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
}
html {
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
}
Chrome shows me this:
It only works if I have the font installed on my operating system.
Try changing font-url to url on lines 3 and 4 of your CSS. It looks like it just isn't recognizing the source of the custom fonts you're trying to load.
You have to link that font in functions.php
Like this
wp_enqueue_style( 'custom', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Roboto' );
Download a ttf font, one available for commercial use, visit https://1001fonts.com/free-fonts-for-commercial-use.html?page=1&items=10 paste a copy into your theme and use #font-face just as you've done above. Everything should work just fine. While I was developing on my local server, everything was working fine. On publishing into public_html, the font refused to load. Had to change to a ttf, you can also try other web fonts format but the ttf works just fine. Better still you can use the google fonts.
I encountered something similar when I was using this wordpress uncode child theme and uploading custom fonts.
I realised it was because I didn't end the second src attribute with a ;
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype'),
}
Once I replaced it, the fonts worked. Stupid mistake but hard to spot after you work for a couple of hours.
#font-face{
font-family: 'Lato';
src: url('fonts/Lato.eot');
src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
url('fonts/Lato.woff') format('woff'),
url('fonts/Lato.ttf') format('truetype'),
url('fonts/Lato.otf') format('opentype');
}
I'm using a css compiler (Stylus) for the first time, and I can't get Google Web Font urls to load correctly.
This:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Roboto:300,500,700&subset=latin,latin-ext);
}
produces:
#font-face {
font-family: 'Roboto';
font-style: light;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light') url("data:application/octet-stream;base64,QGZvbnQtZmFjZSB7CiAgZm9udC1mYW1pbHk6ICdSb2JvdG8nOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXdlaWdodDogMzAwOwogIHNyYzogbG9jYWwoJ1JvYm90byBMaWdodCcpLCBsb2NhbCgnUm9ib3RvLUxpZ2h0JyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9QcnUzM3FqU2hwWlNtRzN6NlZZd25hQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDUwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gTWVkaXVtJyksIGxvY2FsKCdSb2JvdG8tTWVkaXVtJyksIHVybChodHRwczovL2ZvbnRzLmdzdGF0aWMuY29tL3Mvcm9ib3RvL3YxNS9vT2VGd1pObHJUZWZ6TFltbFZWMVVLQ1djeW5mX2NEeFh3Q0x4aWl4RzFjLnR0ZikgZm9ybWF0KCd0cnVldHlwZScpOwp9CkBmb250LWZhY2UgewogIGZvbnQtZmFtaWx5OiAnUm9ib3RvJzsKICBmb250LXN0eWxlOiBub3JtYWw7CiAgZm9udC13ZWlnaHQ6IDcwMDsKICBzcmM6IGxvY2FsKCdSb2JvdG8gQm9sZCcpLCBsb2NhbCgnUm9ib3RvLUJvbGQnKSwgdXJsKGh0dHBzOi8vZm9udHMuZ3N0YXRpYy5jb20vcy9yb2JvdG8vdjE1Lzk3dWFoeGlxWlJvbmNCYUNFSTNhVzZDV2N5bmZfY0R4WHdDTHhpaXhHMWMudHRmKSBmb3JtYXQoJ3RydWV0eXBlJyk7Cn0K");
}
I've tried to troubleshoot, loading a character at a time, and can get part of the url to compile correctly, so this:
src: local('Roboto Light'), local('Roboto-Light') url(https://fonts.googleapis.com/css?family=Robot);
produces:
src: local('Roboto Light'), local('Roboto-Light') url("https://fonts.googleapis.com/css?family=Robot");
But as soon as I add the last 'o' to 'Roboto' it compiles as that crazy "data:application/octet-stream;base64,QGZv..." output.
I have tried other urls and get a similar result. Have also tried escaping the "=" sign. It escapes, but I still can't get it to compile correctly past 'Robot'.
For now, I'm hard coding the css file with the correct urls. Not a huge problem, but I'd like to figure out what I'm doing wrong.
I'm 100% sure that it's not Stylus produces this behavior. You can verify it at http://tinyurl.com/hqthyml (view compiled CSS). Probably it's some plugin or maybe build tool (gulp/webpack/...) that you're using with Stylus.
the font you are using from google fonmt its simple just
put this into you css file on the top
#import url(https://fonts.googleapis.com/css? family=Roboto:400,300italic,300,400italic);
and use simple like
body{
font-family: 'Roboto', sans-serif;
}
you are trying to call a html request into the css file which i understand thats why it compile this
I am using the below font-face rule in my application
#font-face{
font-family: frutilicn;
src: url('../fonts/FrutigerLTW01-47LightCn.eot');
src: url('../fonts/FrutigerLTW01-47LightCn.ttf') format('truetype');
}
When I access the page the font style does not work . I am getting an error in firebug like this:
"NetworkError: 404 Not Found http://localhost/fonts/FrutigerLTW01-47LightCn.ttf"
The 'font folder' is in the same folder as the stylesheet and FrutigerLTW01-47LightCn.ttf is in the font folder
What does that mean and what do I need to do?
Thanks.
We put our purchased fonts (which we embed onto the website) in the root of the site, therefore avoiding issues with relative linking.
#font-face{
font-family: 'Frutiger';
src: url('/FrutigerLTW01-47LightCn.eot');
src: url('/FrutigerLTW01-47LightCn.woff') format('woff');
font-weight: lighter;
font-style: normal;
}
I have a framework of html/css pages using a font-face declaration with a otf. Now I want to switch it to a common font like Verdana. How can I assign Verdana to the font-face declaration avoiding a numerous replacement of font-family declaration? In other words: How can I use the font name declarated by font-face as a font variable?
#font-face {
font-family: 'bauer-bodoni.otf';
src: url(../fonts);
Should be something like this (which is not working in this form):
#font-face {
font-family: 'Verdana', 'Arial', sans-serif;
Thank you very much in advance.
-R.
EDIT/ANSWER: I've found out on my own. The trick is not to list the fonts the way you do in a normal font declaration, separated by comma, but with a "local()" for each:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana');
src: local('Arial');
src: local(sans-serif);
Your update is still wrong. You need the following:
#font-face {
font-family: 'myOwnFontSet';
src: local('Verdana'), local('Arial'), local(sans-serif); }
I'm having a little trouble with using #font-face which really confuses me. I think I'm doing right or not.
So I made the declaration
#font-face{
font-family: Art Post black;
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
Then made the calls
#blah{font-family:Art Post black; } #blah2{font-family:SimplyDelicious;}
Now problem is Art Post black works but SimplyDelicious doesn't work
Also when I remove Art Post black font. it doesn't change meaning the custom font is still not removed. So... I'm confused, am I doing it right? well I guess not.
Your syntax is right, but it is very basic. First, use this recommended #font-face syntax:
#font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
UPDATE: You need "" around the font name in both the #font-face syntax and in your css selection if the font name has spaces in it. It won't select correctly if you don't have the single or double quotes as your code shows. That's likely your problem. Use this new bulletproof syntax though too to make it more cross-browser.
source: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
Then make sure your links are correct. keep in mind, use a / at the beginning of your URL directs the browser to the root directory of your domain. So paste that into your address bar after the domain name and see if it downloads the font file, if so, your links are correct.
This way of calling different font may help :
#font-face {
font-family: 'myriadproregular';
src: local('myriadproregular'), url('myriadproregular.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprocond';
src: local('myriadprocond'), url('myriadprocond.ttf') format("truetype");
}
#font-face {
font-family: 'myriadprosemibold';
src: local('myriadprosemibold'), url('myriadprosemibold.ttf') format("truetype");
}
and in your case
#font-face{
font-family: Art Post black; (why this font name have space? it was supposed to be like ArtPostblack )
src: url('/fonts/ArtPostblack.ttf');
}
#font-face{
font-family: SimplyDelicious;
src: url('/fonts/SimplyDeliciousFont3.ttf');
}
and make sure they are near to css files and proper path.