I have problem with Open Sans font imported from Google Web Fonts.
OpenSans Semibold (600) normal is suddenly on all my webpages rendered in italic.
I tried force font-style to normal etc. but with same results. After changing font weight to 500 or 800 it's back to normal style.
#font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
JSFiddle
Even Google Fonts shows it in italic.
Had the same issue, it was a conflict with the Open Sans I had installed locally. Try to disable your locally installed fonts first.
I'm not sure of the issue since your fiddle seems working fine, however you could simplify your SCSS code like this.
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
p {
font-family: 'Open Sans';
&.weight300 { font-weight: 300 }
&.weight400 { font-weight: 400 }
&.weight600 { font-weight: 600 }
}
It looks like the fiddle is working fine, so its possible that you have another style effecting it. I would check for that with a DOM inspector.
You might also check for unclosed tags, sometimes those can bring over styles from other code as well. If that doesn't work you could try to force it with !important or jQuery as a last resort
<script>
$( ".element-in-question" ).css( "font-style", "normal" );
</script>
Its strange because I wouldn't think that the italic would work without it imported and I don't see it in your code.
Related
I am using 2 #font-face on my index.css file with the purpose of using a font in regular weight and in bold weight as my default font in my entire application:
index.css file:
body {
padding: 0px;
margin:0px;
font-family: "LucidaGrande";
}
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrande.ttf) format('truetype');
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande'), url(../assets/fonts/LucidaGrandeBold.ttf) format('truetype');
}
Now, the regular weight seems to be working for the entire application, however, on an other part of my application I am trying to use the font in bold weight like this:
#presentation-text em{
font-size: 35px;
color: rgb(139, 59, 28);
font-style: normal;
font-weight: 900;
}
However the 900 i.e the bold weight is not being applied, still regular.
Am I using this correctly?
If you're using #font-face, never use local(...). The whole reason you're using #font-face is to ensure that you control exactly which font resource gets loaded for which (set of) font properties. The last thing you want is for the OS to black-box fetch you what it thinks the font is for the name you specified. Even if it really does find Lucida Grande for some user, there is zero guarantee it's going to be the same version you have installed on your development machine.
Interestingly that actually tangential to the real problem here: the way you've written your CSS right now means that, because you have the font installed locally, whatever follows local(...) will never even be looked at by the browser, similar to what happens when you're using font-family: serif, Times. The browser knows how to resolve the first thing, so it immediately stops: it already found what it needed to find.
Effectively your current CSS, running in a browser on your own machine, says this, as far as the browser is concerned:
#font-face {
font-family: 'LucidaGrande';
src: local('LucidaGrande);
}
#font-face {
font-family: 'LucidaGrande';
font-weight: 900;
src: local('LucidaGrande);
}
So you're loading the exact same thing in both declarations. As CSS weights for the text shaper in the browser are entirely independent from the system text engine, the result is exactly what you're seeing: both rules declare the same font resource as the one to use when you say font-family: LucidaGrande, both with or without font-weight: 900.
Drop local(...) and it'll instead work exactly as you need it to.
Also, you'll want to turn those .ttf files into WOFF2 and then load those, because they're much smaller, as well as a promise to the browser that these are indeed unencumbered webfonts.
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 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');
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 have a really bad conflict with using google-webfonts.
OK here is the code:
This is in head:
<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
And this is in the css-file:
body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }
"Oswald" is a font-family of 3 fonts:
book (300)
normal (400)
bold (700)
As you can see.. i've loaded only the bold-face (700). (you can see it in the query)
And it works till here BUT …
THE PROBLEM IS:
I have a desktop-version of the 3 fonts (300,400,700) installed on my computer and as long as these fonts are activated … the browser shows me the wrong font-weight (400) in my html-document.
OK. The problem is that in my css 'Oswald' takes the localfont and not the webfont. But the local font "Oswald" is "Oswald normal". I don't know why google is calling it 'Oswald' instead of 'Oswald Bold'. So I don't know how to fix this problem.
I don't want the css to point at the local-font .. i want it to show always the webfont … because of the right font-weight!
Do you have any ideas?
Please?
Possible to Rename the webfont-call?
You can edit the CSS #font-face rule to fit your needs instead of just loading the automatically-generated one from Google. Basically the issue is that their rule prefers local versions (src: local('Oswald Bold'), local('Oswald-Bold'), ...). The corrected verison would look like:
#font-face {
font-family: 'WebOswald';
font-style: normal;
font-weight: 700;
src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
Just add that to your CSS manually, and use font-family: 'WebOswald'; when you want to use Google's Web version of the font.
I hope that helped!