Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom font not loading correctly in Chrome

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");
}
like image 518
Hashey100 Avatar asked Mar 11 '14 11:03

Hashey100


People also ask

Why are my fonts messed up in Chrome?

Check Font Settings from Google Chrome Step 1: Open Google Chrome and click on the three-dot menu in the upper right corner. Step 2: Go to Settings and search for Fonts. Step 3: Select Customize Fonts menu. Step 4: You can check font size and select different font styles from the same menu.

Do OTF fonts work on Chrome?

TTF/OTF - TrueType and OpenType font support is Fully Supported on Google Chrome 71. If you use TTF/OTF - TrueType and OpenType font support on your website or web app, you can double-check that by testing your website's URL on Google Chrome 71 with LambdaTest.


2 Answers

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>
like image 172
Hashey100 Avatar answered Sep 26 '22 15:09

Hashey100


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')
}
like image 20
Austin Avatar answered Sep 24 '22 15:09

Austin