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
Related
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');
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 can't seem to get #font-face to pull down these embedded fonts.
Page is here: http://clubs.speareducation.com/resources/
The header "Download Digital Resources" is suppose to be gotham_htfregular.
Take a look at my global.css stylesheet (fonts are at the top). Have tried double quotes, single quotes... I have never had trouble with this before... Am I missing something here?
Here is my CSS.
#font-face {
font-family: "gotham_htfregular";
src: url("gothahtfregular-webfont-webfont.eot");
src: url("gothahtfregular-webfont-webfont.eot?#iefix") format("embedded-opentype"),
url("gothahtfregular-webfont-webfont.woff") format("woff"),
url("gothahtfregular-webfont-webfont.ttf") format("truetype"),
url("gothahtfregular-webfont-webfont.svg#gotham_htfregular") format("svg");
font-weight: normal;
font-style: normal;
}
Thanks!
The URLs of the font files are not properly set. Check them out.
I see gothahtfbol-webfont-webfont, gothahtfboo-webfont-webfont, and gothahtfmed-webfont-webfont, all loaded as 'gotham_htfregular'; so tell me, which of these files you're importing contains 'gotham_htfregular'? looks like there's bold, medium, and something else, but none of them look like they're regular.
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.
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 .