I have an extremely strange issue that occasionally happens when viewing a site in Chrome. You can see the issue happening in the image below:
It looks like an overflow / word-break / word-wrap CSS issue, but it definitely isn't. I know this because if I change the font to a standard font like Helvetica in Chrome's dev console, it sort's itself out and goes back to normal, like below:
If I change it back to the font-face type, it then all works ok! It is a very strange problem this. It only occasionally happens, and I haven't seen it happen in any browser other than Chrome. It seems like Chrome is struggling to calculate the length of the words using the font or something. It happens for every element on the page as well, not just the paragraphs in the images above.
This is the CSS for the font-face:
#font-face {
font-family: 'gotham_lightregular';
src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt');
src: url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.eot.txt?#iefix') format('embedded-opentype'),
url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.svg.txt#gotham_lightregular') format('svg'),
url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.ttf.txt') format('truetype'),
url('/ekmps/shops/lm_boutique/resources/Other/gotham-light-webfont.woff.txt') format('woff');
font-weight: normal;
font-style: normal;
}
EDIT
This is the site I am working on. But I'm not sure if it will help as the problem isn't currently occuring, it's hard to catch it when it's happening.
I was having the same issue and found it to be related to this style block that I had in my css document:
* {
/* optimize text for legibility */
text-rendering: optimizeLegibility;
}
I was able to solve it by deleting the offending css and then adding this bit of jQuery code:
$(function() {
$("body").css("text-rendering", "optimizeLegibility");
});
I think there must be a rendering issue in Chrome that causes this, but applying the optimizeLegibility style after the DOM is ready seems to fix the problem.
Related
I am having trouble with #font-face in CSS. The font I am using looks very different in each browser.
See this example in Firefox:
And here in Chrome:
I don't know what causes this problem. I already tried to use text-rendering and I also tried changing the order of the url-properties in the #font-face declaration.
I am using Windows 7 Professional and Firefox V30.
Can somebody inform me about the reason for this issue and tell me how I could fix it?
Many thanks.
//EDIT:
This is the #font-face declaration I am using:
#font-face {
font-family: 'MyFont';
src: url('myFont.eot');
src: url('myFont.eot?#iefix') format('embedded-opentype'),
url('myFont.svg#myfont') format('svg'),
url('myFont.woff') format('woff'),
url('myFont.ttf') format('truetype');
font-style: normal;
font-weight : normal;
}
As I wrote above I already played with the order of this commands.
In my particular problem you can see this page (footer) showing the problem.
Most modern browsers use DirectWrite on Windows to render text, except for Chrome. Luckily they are implementing it now and it was recently set as the default in the latest Chrome builds. Thats the good news, the bad news is that it still has bugs and doesn't always render fonts correctly. You can see if this is a problem by disabling it to see if that fixes the issue.
To disable DirectWrite type chrome://flags/ in the address bar and find the option labeled 'Disable DirectWrite'. If this does fix the issue, you should log a bug with the examples of your text rendering so that it can be fixed.
You can read more about it on the Chrome blog at http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.
This seems to be a font issue since all opportunities that work for others do not affect the problem. Switching to a other font is the only solution in this moment.
I had the same problem and fixed it with the follow small thing
color:#505563;
font-family: 'Dosis', sans-serif;
text-shadow: 0px 1px 2px #eeeeee;
In other words just add text shadow and it will work fine, play with the correct colors as an artist. Try this
text-shadow: 0px 0px 1px #eeeeee;
Browsers have accessibility features that override CSS. Make sure the text or page settings are not zooming. See https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
If nothing else this will at least rule out one variable, making debugging more effective.
Since some days, my Google Chrome browser doesn't show special fonts : CSS with font-face.
#font-face {
font-family: 'Babel Sans';
src: url('../fonts/babelsans.eot');
src: url('../fonts/babelsans.eot?#iefix') format('eot'),
url('../fonts/babelsans.woff') format('woff'),
url('../fonts/babelsans.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
All working fine with Safari, Firefox and IE, and it worked fine the last week.
Someone has the same problem and someone know how I can resolve it ?
Thanks,
I'm experiencing the same issue since Chrome 20 update. This thing happen in Windows Xp and Mac Os X 10.6.8.
Safari and Mobile Safari (that share WebKit engine with Chrome) works perfectly like Firefox and IE.
My css code is exactly like yours.
Looking in the inspector it seems that the font doesn't get downloaded.
Sometimes while navigating different pages (that share the same css external file) in my website the font loads and get displayed properly.
Still trying to solve this...
EDIT:
I managed to solve this issue.
I don't know why, but using this worked:
http://www.fontsquirrel.com/fontface/generator/
I uploaded my font, got the css and converted files, uploaded them to my server and replaced font-face declaration...bling! It works! Hope that works for you too!
It's working now, I think Google has update the browser.
Since there was an update of Chrome for about a week, you may try using an older version to find out if it's a bug (I myself didn't notice any problems). Get one at http://www.oldapps.com/google_chrome.php.
Also check if you're using this font in addion to other font-related CSS values (if so, deactivate them). There were some problems in the past which actually have been solved, but you never know...
First: Convert you font using this service as Mr Stefano suggest:
Later use this CSS code to use your font in your project:
#font-face {
font-family: 'aljazeeraregular';
src: url('aljazeera-webfont.eot');
src: url('aljazeera-webfont.eot?#iefix') format('eot'),
url('aljazeera-webfont.woff') format('woff'),
url('aljazeera-webfont.ttf') format('truetype'),
url('aljazeera-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background-color: #eaeaea;
font-family: 'Aljazeera';
font-size: 14px;
}
Note that when you call font-family in your site you have to use its original name not like what you declare it in #font-face.
I am currently using the bulletproof syntax and converted fonts from Font-Squirrel for the fonts on
www.runningwithpurpose.org.nz (fonts inline css in the html - working)
www.runningwithpurpose.org.nz/broken (fonts in css file - not working)
.
The both methods display fontes fine on browsers other than IE which sometimes will display some or all the fonts and other times not at all (but usually not at all).
I have tried playing around with the htaccess file, using the 'smiley' syntax but neither worked.
However I did manage to fix it but putting the font css inline in the html file.
This is ok but I was wondering why I seem to be unable to get it working as many other people have the #font-face declarations in the css file which would be much cleaner and it used to work fine for me but doesn't.
Any suggestions on how to get this working would be great, considering no other existing help has worked.
One of the #font-face declarations used
#font-face {
font-family: 'Aller-Regular';
src: url('assets/fonts/aller-regular.eot');
src: url('assets/fonts/aller-regular.eot?#iefix') format('embedded-opentype'),
url('assets/fonts/aller-regular.woff') format('woff'),
url('assets/fonts/aller-regular.ttf') format('truetype'),
url('assets/fonts/aller-regular.svg#Aller-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
Have you tried using Google webfont instead ?, I used to used fontface but found that Google font are a million times easier to implement, plus the user doesn't have to download the font off your server each time, it just comes straight from Google.
http://www.google.com/webfonts
As stated in my question I was able to fix it at the time by putting the #font-face declarations inline in the html.
But now IE seems to have decided to fix itself and let me declare #font-faces in the CSS.
I used the Museosans500 font with the following syntax
#font-face {
font-family: 'MuseoSans500';
src: url('MuseoSans_500-webfont.eot');
src: url('MuseoSans_500-webfont.eot?iefix') format('eot'),
url('MuseoSans_500-webfont.woff') format('woff'),
url('MuseoSans_500-webfont.ttf') format('truetype'),
url('MuseoSans_500-webfont.svg#webfontkQkWxTED') format('svg');
font-weight: normal;
font-style: normal;
}
It is working fine in Firefox, but it is not displaying the font correctly in Chrome.
I'm not sure what issues you are experiencing but this website http://seanmcb.com/typekit/webkit-antialiasing-test.html gives a great run-down of test cases of a webkit bug, which might be what you're experiencing.
I'm seeing the anti-aliasing issue in my own site and I'm going to try out the pseudo-element trick. The bug as described by the site: "In Webkit browsers on Mac, #font-face fonts render with whatever antialiasing setting the previously rendered text was using."
Next, would be good to see if webkit has a bug open for this issue.
Yes this is correct - make sure you define SVG first, otherwise Chrome will use that to display the font, and this will look jagged. By putting it first you ensure that Chrome will use one of the later definitions to display the font.
This might be due to the version of Chrome you're running on Windows. I know Chrome 10's #font-face rendering was not too smooth. Please take a screenshot and share with us and then possibly update your browser, take another screenshot and compare them.
Good luck!
Put SVG format before all others on your CSS.
I've used http://www.fontsquirrel.com/ to create a #font-face kit.
It works fine, but the result on windows is different from the result on mac.
On windows the font seems to have a wrong anti-aliasing:
this is the result on Mac with FF, Chrome or Safari (all updated to last version).
this is the result on Windows with FF or Chrome.
As you can see, the result is not the same. On Windows the font is thicker and rougher.
How can I solve this?
I too have been plagued with this on Chrome and I think I've just found the answer!
Chrome didn't like the default fontsquirrel.com generated CSS.
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype'),
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg');
font-weight: normal;
font-style: normal;
}
To fix, i moved the SVG line:
url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')
to the top of the list. Now I see anti-alias fonts! I guess Chrome wants to be first...
/* THIS WORKS FOR ME */
#font-face {
font-family: 'HLC';
src: url('/_styles/hlc/hl-webfont.eot');
src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
url('/_styles/hlc/hl-webfont.woff') format('woff'),
url('/_styles/hlc/hl-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Hope it works for you too. Enjoy!
I'm surprised no one mentioned this. Applying a slight -webkit-text-stroke does the trick for me whatever the format (extension) of the font you are using. Some recommend a -webkit-text-stroke: 1px but to me it alters the font look too much (make it too strong). But a 0.5px one makes the stroke almost unnoticeable and it turns on the antialiasing:
-webkit-text-stroke: 0.5px;
Put it in your css definition for html tag and you're done!
This just looks like the normal ugly way fonts are rendered in WinXP. Some (IMO: misguided) people even prefer it.
To get anti-aliasing for desktop fonts in general on XP you have to turn it on, from Display Properties -> Appearance -> Effects -> Use the following method to smooth edges of screen fonts -> ClearType. The default setting “Standard” is the old-school Windows “font smudging” technique that only bothers to turn on at larger font sizes, and then often makes a mess.
IE7+ has an option—on by default—to always use ClearType anti-aliasing to render fonts in the web browser. Other web browsers will respect the user's configured font rendering method. It is a shame that so many people still have this beneficial setting turned off, but it's not really your problem.
(There is nasty hack to make Chrome perform some anti-aliasing on text, which is:
text-shadow: 0px 0px 1px rgba(0,0,0,0);
but I seriously wouldn't recommend it.)
One thing you can do when the “Use the following method...” setting is set to “Standard”, to try to make the font get some form of anti-aliasing, is to check that the font in question doesn't have a GASP table telling old-fashioned TrueType renderers to disable anti-aliasing at particular font sizes. You can change the GASP table using a font editor or with the ttfgasp.exe command-line tool.
There is also a font called Vegur that looks like Myriad Pro but is legal to embed in a website.
Hope that helps!
I've done a little research, and I've found a hack that I think makes a difference. Put this in your CSS with your font variables:
-webkit-transform: rotate(-0.0000000001deg);
As well, I find that a full-on black (#000000) doesn't help matters either. Using a very dark seemed to help me.
Changing setting in Windows or a browser itself is not a solution. When you use #font-face, you want the font to look nice on every screen in every browser, not just in yours.
The trick with
text-shadow: 0 0 1px rgba(255,255,255,0.1);
or
-webkit-transform: rotate(-0.0000000001deg);
doesn't work anymore in Chrome 16.0.912.63 m, Windows Vista.
I couldn't find a way to overcome this issue though.
This is code im using to fix "Chrome rendering problem":
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.eot');
src: url('fonts/fontname.eot') format('embedded-opentype'),
url('fonts/fontname.svg') format('svg');
}
/*if mozilla*/
#-moz-document url-prefix() {
#font-face {
font-family: 'fontname';
src: url('fonts/fontname.ttf') format('truetype');
}
}
:) it works for me...FINALLY!
-webkit-transform: rotate(-0.0000000001deg);
Update: No longer working in Chrome 15.0.874.106 m. Though it does work in IE9 and Firefox – >Zequez Nov 4 at 15:28
UPDATE: This is working (at least for me) in Chrome 15.0.874.121 m.
IE9 and Firefox shouldn't need it, or be targeted by it since the selector specifies -webkit-.