Using Webfonts (Material Symbols)

Integrating webfonts is simple and just needs some copy and paste.

The nice thing about Google Material Symbols is that they have variable font options that are easily accessible by editing some CSS properties.

Go to Material Symbols and Icons - Google Fonts, select an icon and copy the code from the first box on the right side.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

In Antetype open the header_include file. Go to the menu Plugins and select “Edit header_include in Visual Studio Code” (be sure to install Code first ;-)).

Paste the code.

Now go back and copy the style code from the second boy and paste it to the header_include file again.

<style>
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
</style>

You can now save and close the header_include file.

Now copy the icon code and switch back to Antetype.

<span class="material-symbols-outlined">
check_circle
</span>

Create a cell and paste the code in the Custom CSS field.

That’s‚ it. You can change the size and color directly in Antetype.

Try on your own: webfont.zip (549.5 KB)

2 Likes

Of course this is applicable in a similar way to other webfonts .

1 Like