# 使用@import加载Google字体

**URL:** <https://meta.discourse.org/t/loading-google-fonts-with-import/48045>\
**Category:** Support\
**Created:** [2016年七月31日 20:58 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045 "2016-07-31T20:58:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)\
**Post date:** [2016年七月31日 20:58 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045/1 "2016-07-31T20:58:35Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)\
**Post date:** [2016年七月31日 21:58 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045/2 "2016-07-31T21:58:51Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![jamesmarkcook](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jamesmarkcook/32/168563_2.png) [@jamesmarkcook](https://meta.discourse.org/u/jamesmarkcook)\
**Post date:** [2016年七月31日 22:16 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045/3 "2016-07-31T22:16:48Z")

</div>

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`.

---

<div class="post-metadata">

**Author:** ![ThePassenger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thepassenger/32/64334_2.png) [@ThePassenger](https://meta.discourse.org/u/ThePassenger)\
**Post date:** [2017年七月17日 19:36 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045/4 "2017-07-17T19:36:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)\
**Post date:** [2024年六月8日 12:44 UTC](https://meta.discourse.org/t/loading-google-fonts-with-import/48045/5 "2024-06-08T12:44:25Z")

</div>

此主题已在 2868 天后自动关闭。不再允许回复。