I have an index.html that links to a main.css. Per one of the answers to a SO question about using custom fonts, I have loaded my custom font as such by saving the file FoundrySterling-Medium.otf in the appropriate folder, and then calling it as such:
#font-face{
font-family: "FoundrySterling";
src: "assets/fonts/FoundrySterling-Medium.otf",
}
later on, for the body element, I set it up as such:
body, input, select, textarea {
color: #fff;
font-family: 'FoundrySterling', sans-serif;
font-size: 15pt;
font-weight: 400;
letter-spacing: 0.075em;
line-height: 1.65em;
}
However, no matter what, the font will not show, and instead the default Helvetica or Arial (depending Mac or PC) is used instead. What am I missing?
Thanks!
This is your original code:
#font-face{
font-family: "FoundrySterling";
src: "assets/fonts/FoundrySterling-Medium.otf",
}
Why are you not using a semi-colon at the end? Not sure if intentional.
#font-face{
font-family: "FoundrySterling";
src: url("assets/fonts/FoundrySterling-Medium.otf");
}
try changiing
src: "assets/fonts/FoundrySterling-Medium.otf",
to
src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
I hope it would help you.
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS #font-face rules, so you don't have to write your own).
Change your code to use the url(...) syntax:
Swap:
src: "assets/fonts/FoundrySterling-Medium.otf"
With:
src : url('assets/fonts/FoundrySterling-Medium.otf');
Related
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
My question can be seen as a follow-up of this answer.
I use Google Fonts for my project and now want to change the unicode-range, so only numbers are affected (see linked answer above). My problem is that I don't get it to work with an include:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
When I import the font like this, the font-face is already generated by Google (Google provides also the correct font-face setup to avoid cross browser problems, very convenient). I tried overwriting the imported font-face like this:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
unicode-range: U+30-39;
}
But that didn't work. To achieve the desired affect of having only numbers attached, I need to take the CSS from the Google import URL and copy it into my own CSS/SASS document. But then I lose the cross browser service that was done by Google Fonts API and also the speed of their CDN.
Is there a way to change the unicode-range while maintaining the Google font import or do I really need to host the fonts myself when I want to use unicode-range?
If you want set the range while you are importing, just add to the link the variable 'subset'.
For example:
#import url("http://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin");
Or, if the text is very small you can change the subset variable for text, and add the content inside.
For example:
#import url("http://fonts.googleapis.com/css?family=Inconsolata&text=Hello");
Documentation
What is unicode-range?
It's a prop used to tell the browser when to download a font file. As soon as any character that belongs to the given range is rendered: the font file is downloaded.
The unicode-range is not intended to assign the style to the characters from the given range .
Solution
The best option is to use the text parameter to get a font file per style that contains just the characters you need, in this case the range [0-9].
URL:
https://fonts.googleapis.com/css?family=Lato:300,400,700&text=0123456789
Google Fonts response:
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh7USewqdFhfZ3-4B28Jv7vc&skey=91f32e07d083dd3a&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/l/font?kit=S6uyw4BMUTPHvxwiUT-eLhTc2OsC1s0&skey=2d58b92a99e1c086&v=v22) format('woff2');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: url(https://fonts.gstatic.com/l/font?kit=S6u9w4BMUTPHh6UVewqdFhfZ3-4B28Jv7vc&skey=3480a19627739c0d&v=v22) format('woff2');
}
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); }
This is a general issue, and it seems like there is a solution.
Problem is that web fonts shows choppy in chrome. The solution should be to move the .svg call before the .woff call. Explained here: http://www.fontspring.com/blog/smoother-web-font-rendering-chrome and here: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Problem is, that I'm using google web fonts, and importing the font like this:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
And I dont know, and cannot find out, how to import it with the #font-face css tag instead of the above. I've tried, but got stuck since google only offers the font in ttf and not svg or woff.
Hope you can help.
You'll have to host the fonts yourself if you want to apply this fix.
Your Google Fonts link is a request for a stylesheet, that gets dynamically built based on the parameters you supply - and on browser detection. For your example link:
<link href='http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
If you actually make the request yourself using curl:
$ curl http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic
this is what gets sent back:
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 400;
src: local('Asap'), local('Asap-Regular'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/-KZsao_xwBpcExaHoPH8_w.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: normal;
font-weight: 700;
src: local('Asap Bold'), local('Asap-Bold'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/5DVGWnz9Skaq1amwwwGZEw.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 400;
src: local('Asap Italic'), local('Asap-Italic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/8YIp-EIJXA6NJdTPxy9qiQ.ttf) format('truetype');
}
#font-face {
font-family: 'Asap';
font-style: italic;
font-weight: 700;
src: local('Asap Bold Italic'), local('Asap-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/asap/v1/_sVKdO-TLWvaH-ptGimJBaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
The simplest thing to do is to go back to Google Web Fonts, download the font in question by going here and clicking the download arrow.
Then you can use the suggested fix from here, referencing the font files you downloaded:
#font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Did you do a proper reset of all styles?
Your inconsistent rendering experience can be caused by the browser defaults.
A reset.css sets all Elements back to default-values, this way cross-browser inconsistencies are reduced. There are many examples for reset.css, one of the Most popular is meyerweb reset css.
Another way to reduce inconsistency is to use normalize.css.
The difference between the two approaches in short is, reset.css just resets all browser specific styles while normalize.css has a wider scope by creating cross-browser defaults.
Differences between both are explained here by the developer of normalize.css.
If all those links do not help make sure that you set the font-weight always right an import all necessary font-weights.
You can read about font weights here: http://css-tricks.com/watch-your-font-weight/
You should also apply this technique when you use normalize.ccs because it doesn't reset the font-weight as rest.css does.
Add this to your stylesheet for each element.
opacity: .99;
For example -
p, li {
opacity: .99;
}
I have no idea why this works but it did.
i understand its a bit rude to ask a question from scratch however i have done my research and tried a few examples with no sucess.
im trying to display a font from my local servers.
ex. DigitaldreamNarrow.ttf
which is located in :
css/fonts/DigitaldreamNarrow.ttf
i have tried placing it in my css file in the following manner:
#font-face {
font-family: DigitaldreamNarrow;
src: url(‘css/fonts/DigitaldreamNarrow.ttf’);
}
.top {
font-family: DigitaldreamNarrow;
font-size: 0.2%;
}
however at this point im lost and i dont see any results in my display.
help?
Deploying fonts via CSS is generally unsupported. Take a look at Cufon.
#font-face {
font-family: 'ArvoRegular';
src: url('Arvo-Regular-webfont.eot');
src: local('☺'), url('Arvo-Regular-webfont.woff') format('woff'), url('Arvo-Regular-webfont.ttf') format('truetype'), url('Arvo-Regular-webfont.svg#webfontau9vOdrl') format('svg');
font-weight: normal;
font-style: normal;
}
You're going to have different results from different browsers (not all browsers support/use 'eot' for example). Check out font squirrel, and download an #face kit. Very helpful resource. http://www.fontsquirrel.com/fontface
This is more than likely the direction fonts will take, and Cufon will likely become "Gif Builder"...IMO.
#trey, write this
#font-face {
font-family: 'DigitaldreamNarrow';
src: url(‘../css/fonts/DigitaldreamNarrow.ttf’);
}
may there is a problem with your url please it.
May be you have to add inverted comma to the font .