Font-Issue with menu bar

[l_eckardt]

Hi Support-Team,

we currently transformed a dev-environment into a live-enviroment through implementing a backup of the dev into the live.
Unfortunately we now have an issue with our menu/nav bar: The font changed! Where can we change not only the font but also if it is in capital letters or not?

We also have an issue in the nav bar regarding arrows, which should “symbolize” the drop-down (font: Font Awesome). Where can we change this font?

[rad]

Hi @l_eckardt,

Thanks for reaching out.

May I know which site you’re currently referring? I checked your account and there are multiple sites. And if it’s behind a coming soon page then please provide your login credentials in a secure note.

Thanks!

[l_eckardt]

Site would be novexx.com. Thanks!

[l_eckardt]

Ok we solved now the issue in Chrome, Font is exactly as we want it to be:

Problem is that we get different results for different browser.
For example Firefox:

or Safari:

We assume the problem is caused by the CSS? How can we fix this issue?

Thank you!

[ruenel]

Hello There,

Thanks for writing in!

You are having this issue because of this code:

@font-face{
	font-family:'FuturaLight';
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaLig.woff');
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaLig.woff2');
}

@font-face{
	font-family:'Futura';
	src:url('http://www.example.com/wp-content/uploads/fonts/Futura.woff');
	src:url('http://www.example.com/wp-content/uploads/fonts/Futura.woff2');
}

@font-face{
	font-family:'FuturaMed';
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaMed.woff');
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaMed.woff2');
}

@font-face{
	font-family:'FuturaHeavy';
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaBold.woff');
	src:url('http://www.example.com/wp-content/uploads/fonts/FuturaBold.woff2');
}

(I have replace your domain with example.com)

The problem in this code is that you are only loading the .woff file which is only acceptable in Firefox and not in other browsers. You will have to include the *.ttf, *.eot and other font files to make sure that it will display the same in all browsers.

To better understand how the @font css and the different font file format works for what browser, please check this out:

Using @font-face | CSS-Tricks