Search code examples
fontswebkitfont-face

Webkit @font-face not working properly

fonts.css:

@font-face {
    font-family: 'ubuntu';
    src: url('../fonts/Ubuntu-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'ubuntu-bold';
    src: url('../fonts/Ubuntu-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'ubuntu-medium';
    src: url('../fonts/Ubuntu-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'ubuntu-mediumitalic';
    src: url('../fonts/Ubuntu-MediumItalic.ttf') format('truetype');
}

The elements get the correct font-family attribute, however the styles are messed up. For example ubuntu-medium gets displayed as regular weight, and ubuntu-bold gets displayed with medium weight fonts. I tried to set the font-weight property at element level and in @font-face too, but it did not bring success. Works properly in Chrome or Firefox. Is there a way to fix this?

Solution

  • found an article on this issue: WEBKIT (SAFARI 3.1) AND THE CSS @FONT-FACE DECLARATION