I am using the Noto Sans Hebrew font-face from google's early access webfonts. And as usual, there's a rendering problem on windows.
On IE, things look... actually pretty good:
On Firefox & Chrome, things look kinda choppy (notice the fourth letter from the left):
Now for chrome, I was able to fix it by applying the svg format
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'Noto Sans Hebrew';
src: url('NotoSansHebrew-Regular.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Noto Sans Hebrew';
src: url('NotoSansHebrew-Bold.svg') format('svg');
font-weight: bold;
font-style: normal;
}
}
But firefox won't budge. I tried giving it a specific format like I did with chrome (I tried woff, eot, ttf, svg), but nothing. It keeps looking like that.
What can I do?
p.s.
Don't tell me about fontsquirrel. Besides the fact that they blacklist noto-sans, I already tried using their suggested format for defining font-face (also the css file you import from google is just like it anyway).
Related
Anyone come across with this issue?
Windows 7 Chrome web font OTF issue:
I have a web font and adding it with css3...Looks great in FF/IE(or takes the backup)/Safari but in Chrome(Windows) it looks pretty awful:
I tried this: -webkit-font-smoothing: antialiased;
...Which fixes it in Safari but not Chrome and saw here that Mac should work:
Does -webkit-font-smoothing only work on Mac browsers, Not windows?
I checked this too: http://maxvoltar.com/archive/-webkit-font-smoothing
Here is what i have:
#font-face { font-family: SeravekBasic; src: url('/fonts/SeravekBasic-Regular.otf'); font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;}
html, button, input, select, textarea {font-family: SeravekBasic, Arial, Helvetica, sans-serif; color: #000; }
Lastly I tried Mozillas text-rendering see if this would help webkit but nothing:
https://developer.mozilla.org/en-US/docs/CSS/text-rendering
....Not sure if there is something else that can resolve this.
I wouldn't recommend using OTF for webfonts. It causes some rendering issues for people using Windows XP. You're going to have to use a bulletproof font-face syntax with a media query specifying SVG for chrome.
An example for PT Sans
#font-face {
font-family: "PT Sans";
src: url("ptsans.eot");
src: url("ptsans.eot?#iefix") format("embedded-opentype"),
url("ptsans.woff") format("woff"),
url("ptsans.ttf") format("truetype"),
url("ptsans.svg") format("svg");
font-weight: normal;
font-style: normal
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: "PT Sans";
src: url("ptsans.svg") format("svg")
}
}
Chrome uses an older font rendering system, so it doesn't show fonts as clearly. Chrome fonts look best with SVG so you have to specify a media query to serve only Chrome the SVG file. You can find more information on the syntax here: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax.
You should include ttf, eot, woff, and svg formats in your #font-face syntax. The browser won't download each one, it will only download the one it needs. It also adds appropriate fallback. This should solve most of your font rendering issues.You can get the appropriate files for your #font-face rule by using the fontsquirrel generator: http://www.fontsquirrel.com/tools/webfont-generator.
So my solution was to convert this to embedded Open Type:
.eot and also add .woff for other browser support.
This is actually great because it works fine in IE9 (even IE8)
:)
src: url('/fonts/SeravekBasic-Regular.eot');
src: url('/fonts/SeravekBasic-Regular.eot?#iefix') format('embedded-opentype'),
url('/fonts/SeravekBasic-Regular.woff') format('woff');
I am trying to use Helvetica Neue as the font for my website everywhere so I applied to the body like so
body {
background-image: url("http://inauguralseason.com/wp-content/themes/twentyeleven/images/background.jpg");
font-family: "Helvetica Neue" !important;
}
but my font does not appear, it was working at one point but now its not working in Firefox, Chrome, Safari or IE
you can see what I am talking about here
http://inauguralseason.com/
any help would be appreciated,
Thanks,
J
Your #font-face seems to have the font family named as 'helvetica_neueregular' and I don't see a font set for your navigation but anywhere else if you add 'helvetica_neueregular' it loads the font. As far as browser consistency In Chrome dev tools it looks like you are missing some font browser types to provide full browser support.
http://inauguralseason.com/wp-content/themes/twentyeleven/style.css
#font-face {
font-family: 'helvetica_neueregular';
src: url('helveticaneue-medium-webfont.eot');
src: url('helveticaneue-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('helveticaneue-medium-webfont.woff') format('woff'),
url('helveticaneue-medium-webfont.ttf') format('truetype'),
url('helveticaneue-medium-webfont.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
EDIT: This is loading the medium font but it called regular just change to 'helvetica_neuemedium'
You need to upload the font to your web-site and declare the font-face
#font-face
{
font-family: 'Helvetica Neue';
src: url('HelveticaNeue.ttf'),
url('HelveticaNeue.eot'); /* IE9 */
}
and only then you can use it on your web-pages.
I got the Homestead font from the Lost Type Co-op, which has font-face support. Using Font Squirrel, I got an #font-face package. I included everything and wanted to use the Inline variant as demonstrated here. This is my CSS:
#font-face {
font-family: 'HomesteadInline';
src: url('homestead/homestead-inline-webfont.eot');
src: url('homestead/homestead-inline-webfont.eot?#iefix') format('embedded-opentype'),
url('homestead/homestead-inline-webfont.ttf') format('truetype'),
url('homestead/homestead-inline-webfont.svg#HomesteadInline') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: 'HomesteadInline'; font-size: 10em}
The font works, but renders horribly in Chrome and Firefox, the only browser that I tested that does it right is IE9.
Below is a comparison screenshot:
Is there any way of fixing this?
I've had issues with the font-weight of homestead across different browsers.
Try adding font-weight:200; when you use homestead
I've been trying to use #font-face on a site, I use the css that font squirrel gives me and it looks good in Safari, IE and on the iphone but in firefox it don´t show up.
I have Firefox 7.0.1 on Mac OSX Snow Leopard.
I've searched the web and tried some of the "solutions" but none has worked.
the site I wanna load this #font-face is http://www.utochinredning.se
Can some one point me in some direction of what might be a solution?
Post your code?
Shot in the dark, but have you included all the appropriate font files? This is a sample of what your #font-face should look like (at least what mine looks like)
#font-face {
font-family: 'Museo300';
src: url('Museo300-Regular-webfont.eot');
src: url('Museo300-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('Museo300-Regular-webfont.woff') format('woff'),
url('Museo300-Regular-webfont.ttf') format('truetype'),
url('Museo300-Regular-webfont.svg#Museo300') format('svg');
font-weight: normal;
font-style: normal;
}
I have the following font files:
Museo300-Regular-webfont.eot
Museo300-Regular-webfont.svg
Museo300-Regular-webfont.ttf
Museo300-Regular-webfont.woff
Then in your stylesheet:
h1 {
font-family: "Museo300";
font-weight: normal;
}
I’m currently trying to implement webfonts on the site I build, I want to use it as a fallback within the font-family attribute, i.e. If the character is not represented in Arial / Helvetica then it should be within the webfont used.
I realise this will not work in IE6 and 7 but expected it to work in IE8 which it doesn’t seem too.
I was just wondering if anyone had ever had any experience of this problem and if using a webfont as a fallback font was possible in IE8 or if anyone can just see that I'm just doing something wrong within the code.
Thanks in advance, for any help
Here is my css code:
#font-face {
font-family: 'stix';
src: url('/webfonts/webfont.eot');
src: local('☺'), url('/webfonts/webfont.woff') format('woff'), url('/webfonts/webfont.ttf') format('truetype'), url('/webfonts/webfont.svg#webfont3hGwcDt1') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold-webfont.eot');
src: local('☺'), url('/webfonts/bold-webfont.woff') format('woff'), url('/webfonts/bold-webfont.ttf') format('truetype'), url('/webfonts/bold-webfont.svg#webfontJse4ZhT8') format('svg');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/talic-webfont.eot');
src: local('☺'), url('/webfonts/italic-webfont.woff') format('woff'), url('/webfonts/italic-webfont.ttf') format('truetype'), url('/webfonts/italic-webfont.svg#webfonthDLBqRGk') format('svg');
font-weight: normal;
font-style: italic;
}
#font-face {
font-family: 'stix';
src: url('/webfonts/bold_italic-webfont.eot');
src: local('☺'), url('/webfonts/bold_italic-webfont.woff') format('woff'), url('/webfonts/bold_italic-webfont.ttf') format('truetype'), url('/webfonts/bold_italic-webfont.svg#webfontnuMlJc7x') format('svg');
font-weight: bold;
font-style: italic;
}
body { font-family: arial, helvetica, clean, stix, sans-serif}
body.ie6 #content, body.ie6 .popup { font: 15px/1.6em stix; }
Try to use converter on fontsquirrel.com
What's the benefit of using STIX as a fallback?
If it's to prevent the UA downloading the font unless it's needed, you're out of luck, only webkit has that behaviour currently https://gist.github.com/478344 Worse still, IE will download all the fonts defined in #font-face even if they're not referenced anywhere else in the CSS.
If it's because STIX doesn't have regular chars, yeah, IE's going to screw you over here. I'd recommend merging STIX with a free typeface to create one deliverable that has all the chars you need.
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
#font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
The problem might be that "in Internet Explorer 8 and earlier versions, only one URL value is supported".
Also, rather than using #font-face for a fall-back font, choose one you'd prefer and don't declare "arial, helvetica" in which ever order, instead falling straight back on sans-serif. This way, the most suitable sans-serif is used on each platform, such as Arial for Windows and Helvetica for OS X, etc.
Btw... IE will try to load SVG format so you should define EOT src after svg! (IE bug).