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 (we only download and transform html during real build time).

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 to see the new icons.

mdIconDownload()

Downloading font files has been isolated to its own plugin entry to allow more configuration freedom. By default files are downloaded under public directory:

  • public/material-symbols.css: The stylesheet to include in your page to download the font.
  • public/material-symbols.woff2: The font containing the set of icons you use.

You can customize the paths respectively, e.g.:

mdIconDownload({
  stylesheetPath: 'www/symbols.css',
  fontPath: 'www/symbols.woff2'
})
Clone this wiki locally