- This topic is empty.
-
AuthorPosts
-
August 3, 2012 at 3:56 am #39186bmangoMember
I’m using two special fonts on my website for headings and subtitles using @font-face. They are working fine on a PC in IE, Firefox and Chrome, and also in Safari and Chrome on a Mac. However, with Firefox on a Mac the fonts appear emboldened and slightly blurred. The particular fonts I am using are Utopia and Helvetica Neue Condensed Bold. I have generated the font kits using font squirrel based on otf files. I am using the CSS generated by font squirrel. You can see the website at http://shapecast.benmango.co.uk.
The code I’m using for the CSS is:
@font-face {
font-family: 'Utopia';
src: url('/fonts/utopiastd-regular-webfont.eot');
src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
font-weight: normal;
font-style: normal;
font-variant:normal;
}
@font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
}
@font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
font-weight: bold;
font-style: normal;
font-variant:normal;
}At first the fonts were also appearing blurred and bold on the Mac in Safari and Chrome, but I managed to fix it by adding the following code to the body tag:
-webkit-font-smoothing: antialiased;
I’ve tried adding
-moz-font-smoothing: none;
font-smoothing: antialiased;for Firefox, but it didn’t make any difference.
I have been working on this problem for a few days now and don’t seem to be getting anywhere.
I would be grateful if anyone could offer any advice.
August 3, 2012 at 1:53 pm #107273chrisburtonParticipant@bmango Can you post a picture as I’m not on a Mac? There might be a fix using text-shadow.
August 4, 2012 at 3:05 am #107292bmangoMember@ChristopherBurton I have put a picture of the difference up at http://shapecast.benmango.co.uk/FontBrowserComparison4.jpg.
August 4, 2012 at 9:21 am #107293chrisburtonParticipant@bmango You’re missing some font formats in @font-face. Also, always set the font-weight to normal.
It should look like this
@font-face {
font-family: 'Utopia';
src: url('/fonts/utopiastd-regular-webfont.eot');
src: url('/fonts/utopiastd-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/utopiastd-regular-webfont.woff') format('woff'),
url('/fonts/utopiastd-regular-webfont.ttf') format('truetype'),
url('/fonts/utopiastd-regular-webfont.svg#Utopia') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'HelveticaNeueLTStdCnBold';
src: url('/fonts/helveticaneueltstd-bdcn-fs.eot');
src: url('/fonts/helveticaneueltstd-bdcn-fs.eot?#iefix') format('embedded-opentype'),
url('/fonts/helveticaneueltstd-bdcn-fs.woff') format('woff'),
url('/fonts/helveticaneueltstd-bdcn-fs.ttf') format('truetype'),
url('/fonts/helveticaneueltstd-bdcn-fs.svg#HelveticaNeueLTStdCnBold') format('svg');
font-weight: normal;
font-style: normal;
}
August 6, 2012 at 11:39 am #107380bmangoMember@ChristopherBurton Thanks very much for your response. I’ll try your suggestions and see how that goes. Unfortunately, I also don’t have a mac to test on so have to wait to hear back. I do know that when I changed the font weight from normal to bold it improved the font appearance on legacy Mac browsers (I guess that are using the .svg format), but I guess not many people will be using those versions.
October 18, 2012 at 11:55 pm #112270johan77MemberHi,
Did anyone reach a solution to this? I’m experiencing the same problem, Using Trade Gothic Bold Condensed #20, served by fonts.com. As suggested above, the problem went away in Chrome/Safari by setting
-webkit-font-smoothing: antialiased;
andfont-smoothing: antialiased;
.The thing is, even on fonts.com this issue occurs, when “trying out” their web fonts on different browsers. I’m on a Mac 10.6.8 using Firefox 16.0.1. I have googled this issue for an eternity – but can’t find a solution.
October 19, 2012 at 12:04 am #112251joshuanhibbertMemberIt sounds to me like it is to do with they way the fonts have been hinted for the web. I haven’t had this issue with fonts served from Typekit.
October 19, 2012 at 12:45 am #112252chrisburtonParticipant@johan77 Please provide a screenshot of the font rendering or a live link and I can help determine the issue.
@joshuanhibbert Even Typekit has issues.October 19, 2012 at 1:34 am #112260ramkumarramarajMemberHi,
Your fonts are Built-in Fonts. So you can use important Property.
**font-weight:normal !important;**
October 19, 2012 at 2:06 am #112259joshuanhibbertMember@ChristopherBurton Probably, no one is perfect. But Typekit is one of the closest to being perfect.
October 19, 2012 at 12:10 pm #112281chrisburtonParticipant@joshuanhibbert Typekit is convenient with a very low priced, lease option product. They do a great job with optimizing their library but there are instances where they allowed really poor optimized webfonts into the library which I have already reported (Adelle Light – now updated). At one point Typekit brushed off a rendering issue I noticed with Proxima Nova. Thankfully I had a discussion with Mark Simonson and it’s going to be fixed.
@andy_unleash Font Squirrel optimizes (manually) the fonts in their library just like Typekit. Although their library isn’t all that great.
If you want to talk about quality, Webtype is superior.
October 21, 2012 at 7:44 am #112336jan_patakMemberHi,
I have similar problem but with IE8 on WinXP.
I am using Helvetica font converted by http://www.fontsquirrel.com/ and IE8 on WinXP the entire page is rendered in bold (see screenshot https://docs.google.com/open?id=0B9OjAuDRj29pazFENHc3aXBKZEU). I spent hours on the google but I didn’t find any working solution.
Could anyone help me with this issue?
Link to the site: http://www.webmakers.cz/_klient/bst/October 21, 2012 at 8:54 am #112337chrisburtonParticipant@jan_patak I do believe what you did was illegal. As far as I know, you can’t use Helvetica with @font-face embedding.
October 22, 2012 at 11:43 pm #112445johan77Member@ChristopherBurton, here are the screenshots:
http://dl.dropbox.com/u/29760232/Chrome.png
http://dl.dropbox.com/u/29760232/Firefox.pngI spoke to fonts.com support, and got this answer: “The display you’re seeing is correct in each case. The CSS attribute you’re using is specific to webkit (Safari & Chrome) on OS X only (maybe Linux’s Chromium, I haven’t tested that, though). Even without the vendor prefix, “font-smoothing” is not used by Windows browsers or by any non-webkit browsers on OS X.”
So, I guess what they are saying is that this is just how FF renders fonts. But the difference between screenshots is pretty significant.
October 23, 2012 at 12:07 am #112447chrisburtonParticipantThey are correct. Webfonts will not look the same cross platform as they use different rendering engines. I think once Windows 8 rolls out (this Friday I believe) we will see an improvement with DirectWrite.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.