custom font not loading correctly in Chrome

Question

I am working on a website which works in all browsers correctly but when I use google chrome sometimes it literally does not load the font. I have tried fallback fonts but still no luck - really struggling with this.

When I provide a fallback font it always ignores the custom one for a wierd reason, so the question is why is google chrome not loading the font correctly and is their a way i can force it to load?.

This is the website http://www.rpmediasolutions.com/wordpress

@font-face {
font-family: Solano;
src: url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.eot?#iefix") format("embedded-opentype")
, url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.svg#Solano Gothic MVB Lt") format("svg"),
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.woff") format("woff"), 
url("http://www.rpmediasolutions.com/wordpress/Fonts/solanogothicmvb-sb.ttf") format("truetype");
}

Answer 1

Figured it out.

Its a Chrome bug which does not render fonts correctly.

Here's the link to the bug https://code.google.com/p/chromium/issues/detail?id=336476

I tried CSS methods which were mentioned in the post but it didnt work for me.

So I placed jquery in my footer which happened to fix the issue, it hides all elements in the body and reshow it.

Their is like a few seconds delay before it shows but its a temporary fix until Google jump on this.

This jquery should be in the footer.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>  <script type="text/javascript" charset="utf-8">
$(function() { $('body').hide().show(); });
</script>

Answer 2

I had the same problem and was able to fix it by changing the url. Instead of going to "http://..." to find the file, just reference the directory where the font is stored on your server.

For example, if your font is in the public_html folder and your css file is in a folder within public_html then you just need to go back one directory (../) and access the font.

@font-face {
font-family: myFont;
src: url('../myFont.ttf')
}