Loading Google Fonts with @import

Product Support

AI-generated summary

Loading Google Fonts with @import: Users are experiencing issues with Google Fonts not loading when using @import in their CSS. jamesmarkcook and dax report that @import doesn’t work as expected. The solution, suggested by dax, is to use a <link> tag in the HTML instead, which requires a hard refresh (Ctrl + F5) to see the changes. jamesmarkcook explains that @import needs to be the first line in a CSS file to work correctly, which may not be possible when using a customization that is alphabetically ordered. ThePassenger mentions that their font works in Chrome but not in Safari-mobile and asks for clarification on where to upload the code.

1

I’m trying to use Google Fonts in my site, however the fonts aren’t loading except for in preview mode.

My code is the following:

@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500|Open+Sans);

h3 {
    font-family: 'Fira Sans';
}

I have the customisation enabled so I’m not sure why the fonts wouldn’t be loaded. Has anyone encountered this issue?

2

I have the same issue when I use Google fonts.
@import url... doesn’t work so I use <link href='https://fonts.googleapis.com/css?family=your-font-name' rel='stylesheet' type='text/css'> in HTML sheet instead of @import url.

(when you change the Html code you need to hard refresh the page after you save your change with ctrl + f5 to see the result)

3

Ok, I know why it isn’t working.

@import will only work if it’s the first line in a CSS file. As the customizations are alphabetically ordered before being combined together, if you happen to name your font loading customization ‘Fonts’ it probably won’t be the first in the list which means @import ... will be halfway down your custom css file when it’s generated.

So as @Trash says, better to use link rather than @import.

4

Hi! sorry but where do i need to upload the code? Because the font I use works in chrome but not in Safari-mobile.