Blurry font issue on iPad Safari

Question

I'm using @font-face to load the web fonts which is loading correctly:

@font-face {
font-family: 'HelveticaNeueLight';
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot');
src: url('fonts/HelveticaNeueLight/helveticaneuelight.eot') format('embedded-opentype'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.woff') format('woff'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.ttf') format('truetype'),
    url('fonts/HelveticaNeueLight/helveticaneuelight.svg#HelveticaNeueLight') format('svg');

font-weight: normal;
font-style: normal;
font-variant:normal;

}

I also have another class to style and bold the text:

.BusinessLeftHeader{
    font-family: HelveticaNeueLight;
    font-size: 32px;
    padding: 30px 0 5px;
    text-align: center;
    line-height: 1;
    font-variant: normal;    
}

Now, the problem is that font is not looking bold on iPad 2. It looks like text is showing with blurry effect or something like this.

I also have use this code to fix this problem.

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

But again, still getting same problem. Text is not looking good on iPad 2. When I zoom in, it looks fine.

try giving your containers even widths and heights like if if width is 423px then make it 424px. — Richa, Mar 03 '14 at 10:09

score 3 · Accepted Answer · answered Mar 03 '14 at 10:58

There are a few considerations here, firstly you have conflicting style settings:

-moz-font-smoothing: none;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;

They should all be set to either antialiased or none.

You also state you wish to have a bold font, however you have not set the font-weight style and are using a font called HelveticaNeueLight which I imagine by its very name, is not bold nor include a bold version. At the least you will need to set:

font-weight:bold

Additionally, the issue is likely that the custom font you are using is not packaged with a bold version. In such instances a browser will typically 'interpret' how it should render a bold version using the available typeface, producing unexpected results. You may want to either include a bold version of the font or reference a specific weight if one is included.

Blurry font issue on iPad Safari

1 Answers1