Search code examples
cssspecial-charactersfont-face

Font-face imported font makes special characters look ugly

i am currently building a website which i am using a custom font for. The font is not avaible @ google webfonts, so i had to download the font and load it through @fontface.

I used the markup from the examples from the site where i downloaded the font. Link to the font - http://www.fontsquirrel.com/fonts/Colaborate

heres the css markup

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

}

The font works fine on the webpage , but to get to the problem. I need to use swedish special characters Å Ä Ö - and they just get super weird on the webpage.

heres a image http://oi44.tinypic.com/2r4tmo0.jpg

What could possibly be the problem? In the photoshop i've recieved from the designer they all look allright with the font.

Thanks!

Solution

  • The special characters aren't the characters of the font Colaborate, they are from the fallback font I suppose.

    You need to make sure the package from fontsquirrel contains those special chars.