I have two browsers both running in Ubuntu 10.
Firefox 4 RC and Google Chrome 10. Both have very different representation of bold text. Please, see screenshot below - Chrome on top, Firefox below
Same browsers in Windows and in Mac OSx show no differences or at least very minor ones.
To rule out any CSS incompatibilities, I checked both styles applied and calculated values for font-weight, size, letter spacing and line height. They all match.
Strange enough text (including this one) that is not bold look exactly the same.
The font used is Monotype Corsiva, it is attached as web font. Other fonts do not have this problem.
My question is how do web browsers generate bold text? Why is that dependent on font used and how to work around it? Using other font is not an option, unfortunately.
EDIT: This is the CSS that apply to the text as requested:
text-align: right;
font-size: 110%;
font-weight: bold;
font-style: normal;
white-space: nowrap;
font-family: "Monotype Corsiva","mntcrsweb",sans-serif;
letter-spacing: 0.02em;
line-height: 100%;
text-shadow: -0.1em -0.06em 0.2em #000000;
font-size: 180%;
direction: ltr;
font-size: 10px;
line-height: 125%;
A bold font would be a separate font file, not included in the main font (at least, not for TTF and OTF formats).
Monotype Corsiva does not have a bold variant, so if you try to embolden it, the operating system and/or the browser tries to fake it, with varying (but always less than ideal) results.
Short answer: don't do that.
Cheers,
Thomas
Just remembered another possible reason for your problem. Fonts can include a BOLD version inside the font. Some browsers and OS uses this others generates the bold themselfs. This could be your problem here. The font might have the bold or oppersite. Havent tested it myself, but that could be the problem.
Alternative go for some of the opensource/free webfonts from Google etc.
what happends if you go away from % and em units? use the "faulty px" instead? do they align then? I dont say that you shouldn't use % or em, but does px units produce the same problem?
If it does, I think its time to forget that perticular font for the task. Sounds buggy to me.
Ofcause as you mention, browsers and OS versions renders fonts differently - eg. cleartype on Windows etc. But they ought to be more or less alike anyways.
If I were in your situation, I would first apply 1 css style, check on all browsers. Then apply the next until the look breaks. Debugging starts from bottom. :o)
Related
I have an issue in Chrome only when developer tools is closed.
Basically as you can see from above the icons which are a custom font on occasion don't output at all.
For those who can't see the image the icons which are being output via css :before content are being output as, for-example ï…ˆ instead of the icon.
Below is an example of the css output:
.blog_module #page_content .social_buttons ul li.facebook a:before, .blog_module #pre_content .social_buttons ul li.facebook a:before {
content: "ï„";
font-family: 'icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I know the content is ï„ personally I'm not sure why fontcustom outputs it in this way but 9/10 it works.
I thought it might be character encoding? but why does it only happen occasionally?
Does anyone know what this is and how to fix it?
I also thought it might not be downloading in time but wouldn't it then change once the font has downloaded? That's what usually happens...
Any thoughts, suggestions or answers and I'll be extremely grateful!
Sounds like you have some good suggestions, but the answer I would give you, would be - don't use icon fonts.
If you checkout fontastic.me - there is an option to output SVG icon sprites instead.
It is much more cross-compatible - and a pleasure to work with.
"SVG seems to just work (when supported). Icon fonts seem to fail in weird ways. For instance, you map the characters to normal letters, then the font loading fails and you get random characters abound. Or you map to "Private Use Area" and some browsers decide to re-map them to really weird characters like roses, but it's hard to replicate. Or you want to host the #font-face files on a CDN, but that's cross-origin and Firefox hates that, so you need your server to serve the right cross-origin headers, but your Nginx setup isn't picking that up right, SIGH." - Chris Coyier
article here: http://css-tricks.com/svg-sprites-use-better-icon-fonts/
and another good break down from Ian Feather: http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/
If you get a little snippet going, these are really quick to implement.
The icon fonts just have too many anomalies to account for.
I was developing a website on a iMac and the character 'Š' was rendering properly, then I got some feedback that I missed the 'ˇ' symbol. I double checked it and I had spelled it correctly.
Does anyone know any 'CSS hack' or something to get the character rendered right?
I've tried text-shadow, anti-aliased font rendering without success.
Both examples were made on Google Chrome and font was imported from typekit using:
http://use.edgefonts.net/raleway:n1,n2,n3,n4,n5,n6,n7:all.js
Here's the code incase imgur and jsfiddle decide to drop the links:
* {
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 16px;
}
http://jsfiddle.net/aYFw2/
This appears to be a problem with the font, when some font rendering techniques are used. You can see similar problems with characters like Å and É. Depending on font size, the diacritic marks may be cut off in part (e.g. so that just a small dot appears) or completely. E.g., in size 24px the problem does not exist.
The conclusion is that if you wish to such small font sizes, or want your text to be legible in small sizes, you should use a different font.
Let me give you some examples:
Firefox 13:
Chrome (latest):
As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.
I'm using an .otf font:
HelveticaNeueLTPro-LtCn.otf
And using the following CSS rules to apply this custom font:
#font-face {
font-family: "Helvetica Neue LTPro";
src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
}
a {
color: #665548;
display: block;
font-family: "Helvetica Neue LTPro";
font-size: 15px;
padding: 17px;
}
What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?
Unfortunately you can't just take any font, convert it and have it work well in all browsers. I'd love it if you could but you can't.
Your best bet for getting good results is to use a font delivery service such as typekit or fontdeck that provide fonts that have been designed for delivery across browsers and so have a better chance of rendering consistently. You're still likely to get small variations across browsers and operating systems though, that's the nature of the web.
But in answer to your question specifically, there are no settings or workarounds to make that font appear consistently. For what it's worth I think they both look fine.
That's just depending on how a browser interprets the font. I've never actually used it, but there's a site called fontsquirrel that will take a font and break it up into different font extensions to be used for different browsers. Check it out. http://www.fontsquirrel.com/
I used Google web fonts for my H1 text and the text looks very pixelated on my screen.
<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>
<style media="screen" type="text/css">
h1 {
color:#544E4F;
font-family: 'Forum', cursive;
text-align:center;
margin: auto;
font-size:210%;
}
</style>
Thanks in advance!
After suffering the same problem for a long time, and after doing a lot of research about it, I finally did the following:
I found http://www.fontsquirrel.com
I downloaded the (pixellated) font I was using (Exo family)
I uploaded it to my site
I referenced it locally to avoid using Google Fonts (you can achieve this by downloading a #font-face Kit that is available at fontsquirrel.com also).
It looks OK to me. However note that h1 receives the style:
font-weight: bold;
in most browsers' default style sheets. Since you only have a normal-weight variant of the font available, the browser has to synthesise the bold weight automatically from the normal. There are various different methods of auto-bolding of varying levels of quality, but it's never going to look as good as a real designed bold. Maybe you are getting a poorly-synthesised font variant.
If you want to use Forum for headings I suggest adding the rule:
font-weight: normal;
which will allow the browser to use the regular, unmolested font. Alternatively if you really do want that bold, best choose a different font that does actually have a bold weight.
Another possibility is that you've got anti-aliasing turned off at a system level, and it's being overridden for your normal browser font but not for web fonts. If that's the problem then you could try to override for everything else using eg:
font-smooth: always;
-webkit-font-smoothing: antialiased;
although it's questionable whether it's really a good idea to be ignoring the user's preferences, and also arguable whether it should be subpixel-antialiased instead for WebKit...
Well I'm just throwing these out there, but..
My best guess is to use em rather than % for your font size. Such as, font-size:4.5em.
Maybe try using a div instead of h1, though I doubt that would do much of anything.
Try adding this:
h1 {
text-shadow:0 0 1px transparent;
}
When I design in Photoshop, my fonts are thin and crisp, but when I declare fonts in CSS -- even when using font-weight: lighter -- the fonts always appear bolder.
Maybe this is just how the browser renders the font (In IE fonts stay thin), but I was wondering if there were any tricks or tips for achieving the same thin, crisp looks.
Use CSS to smooth up your fonts...
put this in your CSS:
-webkit-font-smoothing: antialiased;
Font rendering can be complicated. Unfortunately, different browsers will render the same font differently.
As far as CSS goes, setting font-weight:100 ensures the lightest available weight will be used. You may also want to set -webkit-font-smoothing:antialiased.
<style type="text/css">
body {
font-family:"Helvetica Neue", Arial, sans-serif;
font-weight:100;
-webkit-font-smoothing:antialiased;
}
</style>
Helvetica Neue is a very thin font native to OSX.
Your best bet is really http://www.google.com/fonts/
Also noteworthy:
https://typekit.com/
http://www.fontsquirrel.com/tools/webfont-generator
You are right, it is a difference in rendering. How the text renders depends on your OS, your settings, and your browser (Safari, for example, renders bolder than IE). So there is no way to make this rendering match your photoshop comp.
A bit more info here:
Browser Choice vs Font Rendering | Phinney on Fonts
I don't believe any one of the universal web fonts has a very thin weight in all browsers. However, there ways of embedding custom fonts in all major browsers now 'days.
http://typekit.com/
http://www.google.com/webfonts
http://www.fontsquirrel.com/fontface/generator
Any of these tools can get you just about any kind of font you can imagine. Just be careful with copyrights on the last one.