Astro load fonts dynamically

Question

I am trying to load an unknown amount of webfonts in Astro.

function getFonts() {
    return `
      ${global.font
                .map((item) => {
                    return `@font-face {
                font-family: ${item.name};
                src:    url(${item.url2}) format('woff2'),
                        url(${item.url1}) format('woff');
                font-weight: normal;
                font-style: normal;
                font-display: swap;
                }`;
                })
                .join('\n')}
  `;
}

const fonts = getFonts();

But as soon as I use {fonts} it in my head tag, I get either the error "unknown word" or simply the output {${fonts}} as a string. What's the best way to do this?

Answer 1

You can use the set:html directive on a <style> tag like this:

<style set:html={fonts}/>