Search code examples
cssgoogle-webfonts

(Google) Webfont only works locally

I have a strange issue with web fonts for which I haven't found any answer yet - actually not even a question ...

I have a website using a Google web fonts. This displays nicely when opened in a browser from local disk. But as soon as I upload the site to a server and access it from there the specified fallback fonts are used.

The fonts are imported in the CSS like

/* Main sans font (headings)*/
@import url(http://fonts.googleapis.com/css?family=Cabin:400,700);
/* Main serif font (text)*/
@import url(http://fonts.googleapis.com /css?family=Crimson+Text:400,400italic,600,600italic,700);

and then used like (e.g.)

body {
    font-family: "Crimson Text","Georgia",serif;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

I have no (real) clue what could be the reason for such a behaviour, the only guesses being:

  • Something in the CSS references some local resources through absolute paths
  • Some relative paths are resolved differently in a locally opened file than on a web server.

What would be the places to start investigating (if it's not an obvious issue)?

Solution

  • import fonts from https://... url

    google font reference

    @import url('https://fonts.googleapis.com/css?family=Lato|Roboto');
p:first-child{font-family: 'Roboto';}
p:last-child{font-family: 'Lato';}
    <p>https://fonts.google.com<p>
<p>https://fonts.google.com<p>