- This topic is empty.
-
AuthorPosts
-
December 1, 2011 at 12:31 pm #91676
standuncan
MemberInteresting read and lots of good info. I wish Chrome would just upgrade their rendering process, makes me feel about them like I do about IE a little bit.
December 1, 2011 at 12:37 pm #91679TheDoc
Member@standuncan – it’s unfortunate, but there are a few bugs in Chrome. It does’t handle full-page backgrounds very nicely as well as websites heavy on shadows. I’m actually to to do workarounds for Chrome recently, pain in the ass!
July 29, 2012 at 10:14 pm #106992SamLar
MemberHmmm… I don’t completely agree here. First of all I have the same issue. My font-family fonts look horrible on Chrome Windows. Now, fact is, I am using the same font as CSS tricks here for testing and the body font of this site looks pretty awesome to me in Chrome. Ever checked out? So, as mentioned before in this thread, I don’t think this is just a rendering issue based on the fact Chrome uses a software approach. I think it’s a conversion problem maybe? Would be interesting to know in detail how CSS tricks approached this issue for their site?
July 29, 2012 at 10:15 pm #106993chrisburton
ParticipantTypekit
July 29, 2012 at 10:28 pm #106994joshuanhibbert
MemberAs @ChristopherBurton mentioned, Typekit is the answer. They individually hint each typeface for each browser and OS. Also, you may learn a bit more from reading this: http://daneden.me/2012/01/why-do-my-fonts-look-so-bad-in-x/
July 30, 2012 at 1:05 am #107005SamLar
MemberYeah. Found the source of the problem. I used FontXChange to convert fonts which seems to have issues to convert them properly for Windows. Fontsquirrel and all good. So – if any of you use FontXChange just keep an eye out.
September 7, 2012 at 7:55 am #109458kreativmaestro
Memberguys, can anyone help me out. this is weird. I am using a font named “Existence-UnicaseLight” using @font-face.
when i am appling just
@font-face {
font-family: “Existence-UnicaseLight”;
src: url(“../fonts/Existence-UnicaseLight.eot”);
src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/Existence-UnicaseLight.ttf”) format(“truetype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
}@font-face {
font-family: “Existence”;
src: url(“../fonts/Existence-UnicaseLight.eot”);
src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
}chrome just doesnt show anything and foolly when i apply
@font-face {
font-family: “Existence-UnicaseLight”;
src: url(“../fonts/Existence-UnicaseLight.eot”);
src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/Existence-UnicaseLight.ttf”) format(“truetype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
}@font-face {
font-family: “Existence”;
src: url(“../fonts/Existence-UnicaseLight.eot”);
src: local(“☺”), url(“../fonts/Existence-UnicaseLight.woff”) format(“woff”), url(“../fonts/Existence-UnicaseLight.otf”) format(“opentype”), url(“../fonts/.svg#Existence-UnicaseLight”) format(“svg”);
}and define : body {
font: 13px/1.5 ‘CALIBRI’, Arial, ‘Liberation Sans’, FreeSans, sans-serif;
}
it woks. wtf***.can ansy one help also how can I stop Chrome rendering my font bad.
September 7, 2012 at 8:02 am #109459kreativmaestro
Memberokay i solved by myself.
That was because .ttf wasn’t defined. can someone help me in antialising nature of Chrome???September 7, 2012 at 8:10 am #109460chrisburton
Participant-webkit-font-smoothing: antialiased;
January 23, 2013 at 9:32 pm #122076bfredit
Participant`font-smoothing: antialiased;` is not the answer to anything but icon-fonts and large display type.
http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
January 23, 2013 at 10:59 pm #122082chrisburton
ParticipantThat’s actually debatable and depends on the font.
January 24, 2013 at 12:23 am #122086chrisburton
ParticipantI was referring to the posted link by the person above you, sorry.
May 22, 2013 at 6:18 pm #136084tracker1
Member@LaurelBrittany … any system with Verdana will have Arial, so the fallback isn’t needed… also, Arial is fashioned after Helvetica and renders better than Helvetica on Windows, which is the default sans-serif. Helvetica is the default on OSX which looks better… On other OSes it’s another similar sans-serif font. Best for people to simply use “sans-serif” as the default, not specifying Arial, or Helvetica ever.
I cry a little inside when I see font definitions like: Arial, Helvetica Neue, Helvetica, Open-Sans, sans-serif … where on most platforms, it’s the same as just using sans-serif, and if you happen to have more than one of the fonts installed, it may be using one not well hinted for that platform… just use ‘sans-serif’
May 22, 2013 at 7:24 pm #136108chrisburton
ParticipantI cry a little when anyone uses Helvetica. But regardless of the platform, Helvetica isn’t all that great on screen.
In my experience, I don’t ever recall seeing font stacks described above. Usually it’s something like:
`Helvetica Neue, Helvetica, Arial, sans-serif`
April 1, 2015 at 10:49 am #199442eddiei
Participant@ https://css-tricks.com/forums/users/LaurelBrittany/
This is genius. Thank you. I downloaded my fonts correctly from fontsquirrel. I was using Lato and Oswald (Google Fonts). So what I actually did was use your media querie and I actually then called on the Google fonts and I could view them in Safari!!
Great job. Thank you.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.