Hey everyone, I'm working on a site and any special characters ("’" "…") turn into garbage at any font size over 19px. I'm using fonts I defined with #font-face, and the garbage disappears when I use a fallback font. This is Firefox 3.6.13.
I've tried defining the fonts in the page with a font: declaration rather than a font-family: declaration (see here) but it doesn't work.
I can use the standard straight quote and skip the special characters, but have you seen a straight quote in a heading at 40px? Ugh.
Anybody seen this bug, and any suggestions to fix it server-side?
Perhaps you will simply have to use another font?
After some more research, I (sort of) figured out what's going on. Firefox 3+ will automatically "optimizeLegibility" for any fonts over 20px (look up CSS "text-rendering" property).
For whatever reason, the fonts I am using don't render correctly when Firefox applies this value. If I specifically declare:
body { text-rendering: optimizeSpeed; }
Suddenly the problem disappears. Obviously this might bother someone who likes the effect of "optimizeLegibility" (it's definitely a nice effect), but if you can't change font-faces and you're getting garbage in your headings, I hope this helps.
Related
I’m building a website using Google Fonts. In particular I’m using “Archivo Black”.
The font supports special characters such as accents and others, however in Firefox those accents are rending in a really weird position… and in Chrome they look perfectly fine.
I’ve been looking all around but I don’t think there is a way to control the position of such elements via CSS, so I really don’t understand why this might be happening.
In the images below I'm just highlighting one instance when this is happening but if you look closer you'll see it's a consistent issue.
The problem is likely that you are using the 'COMBINING ACUTE ACCENT' (U+0301) along with the U character instead of the 'LATIN SMALL LETTER U WITH ACUTE' (U+00FA) Ú.
The former character set is not in your font so the browser has to use an other system font, which is why it may not render correctly. You can check this in the font panel of your dev-tools.
However, your font does have the Ú character, so if you fix it in your markup, you should be good in all browsers.
#import url('https://fonts.googleapis.com/css?family=Archivo+Black');
body{
font-family: 'Archivo Black', sans-serif;
}
<div>MÚSICA (U + ́ )</div>
<div>MÚSICA (Ú)</div>
I have one very surprising issue with Google Fonts. This is the site in question.
The title is normaly showing in one ligne but a friend of mine with the same Opera version like me sent me this screenshot. You can see that the title goes in two lines and brakes every think.
It's the first time I use Gfonts and must admit that there is another problem in Firefox too - the font appears so jagged!
Thanks for your advises!
The line break can be prevented simply by adding
h1 { white-space: nowrap; }
Font rendering depends on the font, on the font size, on the browser, on the operating system, on the device, their settings, and probably phase of the moon, too. Some fonts are more difficult than others, so the practical move is to pick up another font.
Unfortunately, not all browsers render all fonts exactly the same way. I guess your problem with the title in Opera is caused by the font being rendered bigger. You can try to target a specific stylesheet for Opera to solve that.
As for the jagged font, well... you have to deal with that, and choose fonts that will look sharp on every browser.
Take a look here : http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
The jagged issue was solved thanks to this Joomla! extention - KC Cufón Font Replacement. A have included just the characters of my text - only 3KB of js and I left the same Google Web Font loading too in order the text to be shown until the extention loads.
I am having some problem with Google webfonts.
I am using Google Webfont called ‘Bitter’.
But in Firefox and Chrome it is being rendered differently. Chrome and Opera seem to render it in similar way. It’s not drastically different but it’s messing up the formatting and compositions of the paragraphs.
Here is the CSS:
.small-col h3{
color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;
}
And here is a screenshot of the issue I am talking about:
http://i49.tinypic.com/2u46mpi.png
Could anyone suggest how I can get consistent rendering in both Firefox, Chrome and Opera?
Thanks
Fonts are never going to render the same across all browsers. They use different rendering engines—trying to get websites to look identical on every browser is a lost cause.
For your specific problem, use a non-breaking space to prevent contact and us from being separated.
<p> ... contact us </p>
It looks like firefox is rendering the weight a little different, and the spacing a little differently too. Maybe try defining those numerically, as well, to override any browser defaults. Unfortunately, different browsers and especially OSs like to render fonts differently and by their own rules at times.
There can be differences in font rendering between browsers, though more often, differences exist between platforms.
However, here the difference seems to be caused by letter spacing. More exactly, Firefox correctly applies it, WebKit browsers don’t. For 16px font size, -0.06em should result in a little over one pixel, and if you use the inspection mode (F12, computed style), you will see that Firefox applies -1px whereas Chrome uses normal (i.e., zero) for letter-spacing. Chrome seems to have some threshold on the letter spacing value; making it just -0.065em changes things.
So especially if you prefer the Chrome rendering, just omit the letter-spacing. It is generally best to avoid letter spacing – the font designer should know better, and if you agree with her or his choices, use another font, instead of of trying to “fix” the font.
One of the differences between browsers is that Firefox applies kerning by default, other browsers don’t. But this is not relevant to the specific texts in the example, since the kerning table for Bitter has pairs of uppercase letters only (so “VA” would look different, for example).
I had the same problem with the serif font. If you write "serif" instead of serif (without ""), Chrome will render the same as Firefox.
Try adding the google webfonts code to the head of your website by using the provided javascript code, instead of css or #import.
This solved my problem on this topic.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
I have a font installed on my pc, but after using a font-face converter and changing the css suitably, the lines in my ul are more spaced out, the font-size hasn't changed, but the spacing between them has. What CSS do I need to use to revert this? Example: http://www.givetoagiver.co.cc/about.php
If you need any more information, then please ask, thank you
letter-spacing (http://www.w3schools.com/css/pr_text_letter-spacing.asp)
line-height (http://www.w3schools.com/css/pr_dim_line-height.asp)
The above two take care of all the distanced between lines and individual characters.
Still, if the font works OK when it's installed locally, there's a chance the conversion process introduced the problem. What tool have you used for the conversion? Have you tried Font Squirrel's converter? I've never had issues with it.
PS. The link you provided does not seem to work for me.
[EDIT]
#Yi Jiang suggested these links as an alternative to the ones provided by me:
http://reference.sitepoint.com/css/letter-spacing
http://reference.sitepoint.com/css/line-height
Each font can have its own spacing. Web fonts usually uses both the same spacing, so we use them without any issue. with custom fonts, sometimes we've got to change the line-height accordingly:
font: 44px/1.2em Sohoma;
1.2em is the line-height.