Skip to content

Serving fonts locally

Jump to bottom
Valentin Degenne edited this page Jan 17, 2024 · 14 revisions

For this strategy we will need to download the fonts and transform the html during build time. In this example we use @web/rollup-plugin-html, however you can use any html transformation logic you want:

rollup.config.js:

import {
  mdIcon,
  mdIconDownload,
  replaceSymbolsLink,
} from 'rollup-plugin-md-icon';
import {rollupPluginHTML as html} from '@web/rollup-plugin-html';

const DEV = process.env.NODE_ENV == 'DEV';

export default {
  plugins: [
    mdIcon(),
    DEV
      ? []
      : [
          mdIconDownload(),
          html({
            transformHtml: (html) => {
              if (DEV) return html;
              return replaceSymbolsLink(
                html,
                '<link rel="stylesheet" href="/material-symbols.css">',
              );
            },
          }),
        ],
  ],
};

Using DEV environment variable in this configuration prevents the page from sending new requests to fonts.googleapis.com every time new icons are added or deleted during development.

Downloading fonts during development

If you don't mind sending too much requests then you can simplify the above configuration to:

import {mdIcon, mdIconDownload} from 'rollup-plugin-md-icon';

export default {
  plugins: [
    mdIcon(),
    mdIconDownload()
  ],
};

and change the link in your index.html:

<head>
  <link rel="stylesheet" href="/material-symbols.css">
</head>

However this is not recommended for two reasons:

  • This can send too much requests over the network.
  • The browser will not always update the font, which means you'll have to manually hard reload the page too see the new icons.
Clone this wiki locally