# Google Fonts @import line breaks up when running yarn build:production

**URL:** https://discourse.roots.io/t/google-fonts-import-line-breaks-up-when-running-yarn-build-production/18865
**Category:** sage
**Tags:** sage9
**Created:** 2020-08-10T00:36:23Z
**Posts:** 5

## Post 1 by @shaimoom — 2020-08-10T00:36:23Z

In my `main.scss` file, I am importing Google fonts with this line:

```
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
```

After running `yarn build:production` the css file in the `dist/styles` folder now has a line break:

```
@import url(https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;

0,600;0,700;1,400;1,600;1,700&family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap);
```

This causes the second font to not render. I have also tried importing each font as a separate @import, but in both cases a line break is inserted. Any ideas on what I am doing wrong or is happening?

---

## Post 2 by @codepuncher — 2020-08-13T13:56:26Z

Don’t import using SCSS or CSS. Enqueue it “the WordPress way”.

---

## Post 3 by @yeah — 2020-08-14T06:37:21Z

… or you can use [Web Font Loader](https://github.com/typekit/webfontloader)

---

## Post 4 by @ben — 2020-08-18T03:18:20Z

Another option is using [https://google-webfonts-helper.herokuapp.com/fonts](https://google-webfonts-helper.herokuapp.com/fonts) to serve them straight from your own server

---

## Post 5 by @system — 2020-09-21T00:36:23Z

This topic was automatically closed after 42 days. New replies are no longer allowed.