How to add Google Material Icons to Squarespace with Custom CSS

First download a WOFF2 font file from their Github Repo.

In Squarespace go to Website > System Pages > Custom CSS and upload the file to your Custom Files.

Paste, or type, the follow code:

@font-face {
  font-family: 'Material Symbols Outlined';
        src: url()
}

If you paste, put your curser between the parenthesis, click on your Custom Files, and select your font. This will input the link from your Squarespace asset library for the font family source.

Next, paste this line of code in your custom CSS. Be sure the font-family name is the same. Change '“h4” to which every font size you want to assign the icons to. Keep in mind: this will be across on your pages. Use this code in a </>code</> block if you want to do this on only one page.

h4 {
font-family: 'Material Symbols Outlined';
}

Head to https://fonts.google.com/icons and select the icons you want to use. For instance, typing “cake” in a Header 4 will add the cake icon.

Optional: you may find better optimization with this code. You can also utilize font-size ##px;

h4 {font-family: 'Material Symbols Outlined';
  font-weight: heavy;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}