custom font not loading correctly in Chrome - html

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')
}