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.
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.