Wordpress Special Character in Menus/Buttons

[swinnie]

Hi All,

I have just taken on the hosting of a website for a friend, which is based on Wordpress.

The menus/some buttons have some special characters to put in arrows/phone symbols with CSS. But on the old host they are working fine, but on the new host (TSOHost) they are not? Any ideas? Same browser gives this result:

New

Old

Many thanks in advance.

 

[Redrum]

Are they actual characters or are they from an icon font? If they are from a font file, it might be the server is not serving the correct MIME type as that can cause this problem.

 

[swinnie]

Yeah it looks as if they're coming from a Font File. What MIME Type does it need to be serving...

This is the font definition in the CSS:

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

 

[Redrum]

It depends on the font format, but in your CSS it's a .eot, which according to what I just Googled (http://www.jbarker.com/blog/2009/mime-type-css-web-fonts), should be:

application/vnd.ms-fontobject

You can check what it actually is by opening your browser's network page in the debug/developer tools and loading the font from the new server. It should show the MIME type in the results somewhere.

If it is wrong, it's probably something you'll have to ask TSO Host to fix unless you have root access to the server.