google / google/fonts

Semicolon delimiter between font weights breaks Webpack-compiled CSS

Open
#2,431 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
20.5k
Forks
2.9k
Avg merge
1d 21h
Merged PRs (30d)
95

Description

The semicolon delimiter used for multiple font weight selections breaks the compiled CSS when using SCSS / Webpack.

SCSS:
```
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
```

Compiled CSS:
```
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;

600&display=swap);
```

I'm assuming Webpack sees the semicolon as a line-ending character and puts the following text on a new line. This causes the import to fail in the compiled CSS.

**Solution**: Using the HTML entity for semicolons (%3B) resolves this issue. Suggesting that this be swapped in the import codes supplied by Google Fonts.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.