Why does Material Symbols font take so long to load and how can I optimize it?

Question

Right now I'm using Material Symbols for my website. It works great! It's pretty, easy to use and works great with my design. However, I'm noticing that it takes a LONG time to load. Once the *2.7 MB* file finishes loading and gets cached, the website loads pretty fast. I'm loading the file using a CSS import:

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');

But loading using an HTML tag is still super slow. It's taking up to *30 SECONDS* to load those 2.7 MB on the Fast 3G preset. Other fonts (also imported using a CSS import) take at most 500ms to load (under that same 3G preset). Why is Material Symbols taking so long to load? What can I do about it? I know for sure I don't need all those icons, so how can I only load the icons I need? Or is this normal?

I tried importing the CSS file in other ways, such as an HTML tag, import it using JS and even using the static icon font, instead of the variable one. It's still taking a lot of time though. Other fonts used to have this issue, and I solved it by removing the Italics because I wasn't using them. That seems to have fixed the issue. However, AFAIK you can't do something similar with the Material Symbols font.

Answer 1

I found a solution, you can manipulate the font request of the file and take only what you need: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined

This is the base link and you get all, you can filter by adding :opsz,wght,FILL,GRAD and then the tuple @20..48,100..700,0..1,-50..200

In the tuple you have to specify the numbers in the right order (20..48 is referred to opsz.

You can completely remove an option, I only took wight from 100 to 400 and only filled and not filled icons reducing the size of the woff2 file from 4MB to 700kb.

Hope this can help, I think is the better solution.

My personal example: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1

/* fallback */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v122/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}