CODEWITHSUNDEEP
htmlcssgoogle-chromefontsgoogle-font-api
NakedCat
NakedCat

Reputation: 860

Google font doesn't load properly in Chrome

I am developing a website with the "Ubuntu Condensed" font from Google Fonts. Sometimes when I navigate through subpages my navigation menu changes its style to either a different font or a different style. Sometimes other text on my website changes its font or special characters (Polish) are rendered in a different font.

I realized it's something wrong with Chrome, because whenever I bring up the element inspector and disable/enable a CSS rule everything goes back to normal. Chrome seems to be loading the CSS too late.

I tried the font fix for the Chrome bug but it doesn't work at all. Nothing helps. Firefox displays everything properly though.

Upvotes: 2

Views: 7888

Answers (4)

swt83
swt83

Reputation: 2011

Delete this from your stylesheet:

text-rendering: optimizeLegibility;

This is a bug in Chrome, I just noticed it the last few months.

Upvotes: 1

user25775
user25775

Reputation: 71

Copy and paste this code into HTML header fonts will be loaded automatically when you have internet access 

<link rel="stylesheet" type="text/css" href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed'>

Upvotes: 0

user5201742
user5201742

Reputation:

Two problems there:

1) It's seems there's a conflict with local font: Google Webfont conflict with local font, so the first step it's to import the Ubuntu Condensed like a local font:

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

2) I've tried without css links and it works, but the html5blank css files change the body font property, you have to change these rules or add important:

@font-face {
          font-family: 'UbuntuC';
          font-style: normal;
          font-weight: 700;
          src: @import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed);
        }

        body {
            font-family: 'UbuntuC', sans-serif !important;
        }

Tested in Chrome, OS X

enter image description here

Upvotes: 2

Aziz
Aziz

Reputation: 7783

The issue might be caused by not including the extended latin subset of the font, thus causing weird rendering of certain characters, I would recommend adding the subset for better compatibility.

Add this to your header and make sure it is before any CSS file:

<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

CSS rule

font-family: 'Ubuntu Condensed', sans-serif;

I would personally go with the Google CDN instead of downloading the font and loading it locally, for more in-depth details on that, read: webfonts vs. local fonts

Upvotes: 1

Related Questions