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

[shaimoom]

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?

[codepuncher]

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

[yeah]

… or you can use Web Font Loader

[ben]

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