search

xp-forge / frontend

Web frontends
1 stars 1 forks source link

Add support for bundling web fonts #28

Closed thekid closed 1 year ago

thekid commented 1 year ago

Configuration

Use this in package.json:

{
  "bundles": {
    "vendor": {
      "fonts://display=swap": "Overpass | Lato"
    }
  }
}

Usage

image

Resulting CSS

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(qFda35WCmI96Ajtm83upeyoaX6QPnlo6_PPrOQ.bb5a7dd.ttf) format('truetype');
}

The TTF file is downloaded and stored alongside the CSS file.

Uses https://developers.google.com/fonts/docs/css2 See https://www.webdesign-journal.de/google-webfonts-einbindung-dsgvo/