CODEWITHSUNDEEP
cssfontsmaterial-designwebfontsicon-fonts
Solace
Solace

Reputation: 9020

How to self-host Google's Material Design Icon-Fonts on your server, and use them in your website?

In this guide, they have instructed to download the Material Design Icon Fonts in formats like ttf, eot, woff, woff2 etc. and host them at a location on the server and use CSS like :

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
       url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
       url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

The problem is that in the Material Design Icons Collection page, when I select an icon, a bottom menu appears which shows buttons labelled SVG, PNGS, and <> ICON FONT, and when I click the last one, I get instructions which suggest loading the icon font from the web (which requires access to internet, and I need my web page to work (on localhost) even if there is no internet connection). Screenshot below.

The question is that how do I download the material design icon fonts in formats like eot, ttf, woff and woff2, so that I can self-host them and use them without an internet connection, in the way described above.

enter image description here

Upvotes: 4

Views: 4877

Answers (2)

user149408
user149408

Reputation: 5901

The current version of the guide (as of April 2023) implies that you can download the fonts from the Github repository. In reality, however, that repo only has the TTF version of the font, the other formats (EOT, WOFF, WOFF2) are missing.

There is a fork at https://github.com/marella/material-icons, which always has the latest fonts in TTF, WOFF and WOFF2 (only EOT is missing, but that is a niche anyway, required for Internet Explorer 6–8 only).

You can just grab the fonts from the repo (note that filenames differ from what Google assumes in its docs) and drop them on your server. This is what I did (changing filenames to match those in the Google docs) and it works as expected.

Alternatively, the repo has setup instructions for various other methods.

Upvotes: 1

Marcin Wojnarski
Marcin Wojnarski

Reputation: 2710

In the Material Icons' CSS file:

https://fonts.googleapis.com/css2?family=Material+Icons

there is a direct URL provided which you can use to download the raw .woff2 file:

https://fonts.gstatic.com/s/materialicons/v120/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

I don't know if this .woff2 link is stable, possibly it can change in the future. Still, this link is enough for one-time download and then self-hosting.

Upvotes: 1

Related Questions