nuxt-inline-font.md

PREPARE

Last ned Google font (husk å legge til latin-ext/ æøå):

https://google-webfonts-helper.herokuapp.com/fonts/noto-serif?subsets=latin,latin-ext

Sett unicode ranges til 0020-007F,00A0-00FF og last ned fonten (woff2) via

Feks. Noto Serif Latin Extended 64kb → 26kb

UTFORDRING

For å slippe å generere statiske filer på server per publikasjon lønner det seg å dynamisk generere inline css mtp. @font-face.

Dersom man ikke ønsker/tør å bruke dangerouslyDisableSanitizers: ['style'] i nuxt config (burde ikke være "dangerous" da det spesifikt brukes på style og ikke js/html) er løsningen en simplere font-definisjon som ikke er avhengig av quotes.

WORKAROUND

src local() droppes, da font-family name (feks "Noto Serif Bold") er avhengig av quotes.
src format() droppes, da quotes er påkrevd. Dvs. at browseren selv må resolve format. Perf impact unknown.
"font-family: Font Name Tokens Without Quotes" fungerer så lenge man holder seg til bokstaver.

Potensiell fix for 1: Hent inn fonten i en opensource editor (feks fontforge), rename (no spaces) og lagre.

IMPLEMENT inlineExternalFonts.js

export default (context, fonts = []) => {

    const cssText = fonts
        .reduce((css, { 
                weight = 'normal', 
                style = 'normal', 
                display = 'swap', 
                name,
                url
            }) => css + (!url || !name ? '' : `
                @font-face {
                    font-family: ${name};
                    font-weight: ${weight};
                    font-style: ${style};
                    font-display: ${display};
                    src: url(${url});
                    unicode-range: U+0020-007F, U+00A0-00FF;
                }
            `), '')
        .replace(/\s{2,}|\t|\n/g, ' '); // "uglify"

    if (!cssText.length) return;

    const head = context.app.head;
    head.style = head.style || [];
    head.style.push({ cssText, type: 'text/css' });
}

IMPLEMENT store/index.js

export const actions = {
  ...
      commit('setPublicationSettings', state.config.global);
      inlineExternalFonts(context, state.config.global.fonts); 
  ...
}

ADD fonts config

...
"fonts": [
    {
        "name": "Noto Serif",
        "weight": "bold",
        "url": "https://static.fvn.no/fonts/noto-serif-v7-latin/noto-serif-v7-latin-700.woff2"
    }
]
...

ETC

det hadde selvsagt vært cleanere med en felles CDN og "filename" (notoserif.woff2) istedenfor "url" i config, altså src: url(${cdn}/${filename}), men øredobber kan vi smykke oss med ved en senere anledning, tenker jeg

frdnrdb/nuxt-inline-font.md