I have come across an issue with Windows rendering of an Font Squirrel #fontface font (Lekton Regular).
In Chrome and Firefox it renders perfectly:
But in the same browsers in Windows (XP and 8 tested), it adds top and bottom padding:
The computed styles for both elements are the same across both browsers, on both operating systems.
Is this a known issue and is there a work around?
The problem was with the font file. The problem disappeared when I loaded an alterative (from Google Fonts)
Related
I am using a custom font that I implemented into my website using the #font-face css selector and provided the different formats of the fonts for the different browsers, up to this point firefox, chrome IE11 and opera render the font approximatly the same.
but when it comes to giving a font-weight: 900; Only Chrome succedes in rendering a bold enough font,
firefox and IE rendering is close to what chrome renders at 500 or 600
is there a work around to acheive the same result in the other browsers without having to implement a bolded version of the font in all different formats ???
firefox rendering
chrome rendering
The best way to keep font weights consistent is making sure that font comes with a bold weight font file. If your font files don't come with your desired weight then the Browser & OS will try to manually style the font which results in, as you've seen, different rendering.
I'm working on a website, and I have a problem with displaying font on two subages in webkit browsers on Mac OS X. In all Windows browsers fonts look the same.
In Safari and Chrome on Mac the font on http://clients.cateristic.com/2013/catering/hospitality/vip-catering-fur-mcarthurglen-group/ is bolder than on http://clients.cateristic.com/2013/portfolio/hospitality-catering-texas-usa/ even though the styling of .project-description and .single-container are the same.
Any ideas?
Hmmm... maybe set a particular numeric font weight for the classes?
for example instead of font-weight: normal, set font weight: 400. Perhaps the browsers have different interpretations of font-weights.
http://webdesign.about.com/od/fonts/qt/aa031807.htm
I am using an embedded google font in my HTML for the header of my website. It works fine in all browsers on most computers, but does not work on some macs. I read a solution for this that suggested adding the declaration !important to the line in my CSS where I call the font, but that didn't work. I have two macs at home, mine and my boyfriends. The font works fine on his in all browsers, but on mine it only works in firefox. We are both running mountain lion. Any suggestions??
Here is a link to the site: http://nataliearriolaphotography.com
I tried doing this by the #import method in my CSS as well and it still didn't work.
The page uses the weight 100 typeface of the Lato font family, but the text declared to be in the font has a different font weight: the default weight normal, i.e. 100. The secondary font specified on the page is san-serif, which is a nonexistent font (sans-serif would denote the browser’s default sans serif font). Different browsers may handle this differently depending on the circumstances.
So you should add
font-weight: 100;
to the CSS rule for the element.
I am trying to use the CSS font face property. I've made it chance the font to the right one, however it looks very edgy on the Windows platform. Especially Chrome looks awful.
When using OSX all browsers are just perfect.
How can I avoid these awful looking fonts?
On OSX Chrome:
On Windows Chrome:
The Segoe font is already installed on most Windows PC's. This can cause problems when you are also trying to link it with CSS. Try renaming the font in your CSS so that it has a different name than the built-in Windows font.
Also, Chrome just doesn't render TTF/WOFF fonts very well. You can get around that by prioritizing the SVG font (by putting it higher up in the font list). This will make Chrome select the SVG font (but most other browsers will still use the WOFF font). See here for more information.
For a site we're developing we've been using Lato from Google's WebFonts API. It works perfectly in every browser (even IE), except for one very important case: Firefox 3.6 on Windows XP (haven't tested in Win 7 yet). The font loads and is displayed, but the characters look awful, like antialiasing completely malfunctioned.
My googling has found hits about problems with webfonts in FF4 due to a bug in the browser, but I can't find anything about 3.6. Is there something we can do to fix this?
The reason Google's font looks like that has to do with a setting in the font's GASP table. This table toggles 'grayscale' and 'gridfitting' for ranges of sizes. I looked at the font Google is sending to your site and for sizes 0-13 grayscale is turned on. 14-18 is set for gridfitting, which results in black and white rendering. Then 19+ is set for both grayscale and gridfitting. I bet if you changed the size of the text to 13px, it would suddenly turn antialiased.
As for Font Squirrel fonts, we set the GASP table to render grayscale+gridfitting for all sizes above 4px.
There seems to be a difference between Google webfonts and the same font downloaded from Font Squirrel, see this (unrelated...) question.
So I would try and use the version they have at Font Squirrel to see if that solves the problem.