Home/ Questions/Q 6793199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T18:04:20+00:00

I’m using custom fonts on my webpage using the following code: @font-face { font-family:

  • 0

I’m using custom fonts on my webpage using the following code:

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.eot');
    src: url('fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/HelveticaNeueBold.woff') format('woff'),
         url('fonts/HelveticaNeueBold.ttf') format('truetype'),
         url('fonts/HelveticaNeueBold.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

This works fine across all browsers on Mac but looking at it on PC on Chrome and Safari it appears jagged. Are there any fixes I could use to make it all look the same? Below shows the difference (Mac on left, PC on right – both on Chrome).

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @font-face fonts on PC generally look a little more ropey, but ‘Hinting’ the fonts will improve readability.

    Try running your fonts through the font squirrel convertor, which can process the hinting as part of the conversion.

    http://www.fontsquirrel.com/fontface/generator

    As a side note I’d also just not use @font-face for Helvetica, and just rely on people having the font installed, falling back to Arial. Not the closest match, but it will give you the best result.

    • 0