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

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

@import url(",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(,wght@0,400;


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?

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

… or you can use Web Font Loader


Another option is using to serve them straight from your own server

1 Like

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