Loading Google Fonts with @import

support
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)

1 Like
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.

5 Likes
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.