Self Hosted Material Symbol Font with Django

Using Django Templates & Frontend
1

Has anyone here sussessfully hosted and served Google’s Material Symbols Fonts using Django? How did you do it?

I get a box (something signifying a missing character).

It works well with the older (now deprecated) Material Icons. Material Symbols are VariableType fonts. I wonder whether the issue is with the architecture (fonts) or something I am missing. Django outputs the following when rendering any element that uses the font:

[15/Nov/2024 07:55:26] "GET /static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf HTTP/1.1" 200 293276

That seems to suggest that all is fine, but I see no symbols.

2

Hello!

Have you set this in your header?

<head>
    <!--Google icons-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
</head>
3

I have a similar entry. However mine (href) points to the location on the host.

<link href="{% static 'path/to/fonts.css' %}" rel="stylesheet" type="text/css" />

I followed Google’s guide here. The fonts were declared using @font-face as specified there. Like I said earlier, django GETs the fonts. They just don’t render on the browsers.

4

Are you sure the font exist in your static folder? If yes, is path a directory in your static folder?

I suggest you check the path to the font in your static folder.

5

I found the cause of the problem.

I had obtained the woff2 and ttf files from Source. Those files appear to be truncated. Font Viewers choke on them. I just recently found out that Google provides a direct download link to the fonts. However, the resulting archive includes truetype fonts only.

Guess what? Those files are larger … running into megabytes, whereas the previous ones were in kilos. I have applied the latest files. Everything works!

In the long run, this had nothing to do with Django. I thought I might be doing something wrong within Django. I was wrong. Now the next real challenge is bundling Material Symbols with my Django module (at PyPi). The module requires Material Symbols and the file sizes just went up significantly. Is it possible that current Material Symbol Fonts are maintained in a pip repo? That would make sense.

6

If you only need a small percentage of the symbols, you could create your own smaller version of the font only containing those. I did something similar with a different Google font and wrote up how to do it here How to generate a subset of an emoji font using Python (Phil Gyford’s website)

1 Like