Serving Material Symbols Fonts in Django

Based on your logs, Django is correctly serving the font file, but you're still experiencing display issues with the Material Symbols variable fonts. This is likely not a Django-specific issue but rather related to how the font is being referenced or used in your CSS and HTML.

Possible Solutions

1. Check your CSS @font-face declaration

Make sure your CSS properly declares the variable font:

CSSCopied
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('/static/fonts/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf') format('truetype-variations');
  /* or use format('truetype') if the above doesn't work */
}

2. Verify your CSS usage

Ensure you're properly setting the font variation settings:

CSSCopied
.material-symbols {
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

3. Check MIME type configuration

Django's development server should handle this correctly, but in production with mod_wsgi and Apache, you might need to ensure the proper MIME type is set for variable fonts:

APACHECopied
AddType font/ttf .ttf

4. Verify HTML usage

Make sure you're using the correct HTML structure and class names:

HTMLCopied
<span class="material-symbols">home</span>

5. Check browser support

Variable fonts are supported in modern browsers, but make sure your target browsers support them.

Deployment Considerations

Since you're using Django with mod_wsgi (based on your logs), ensure that your Apache configuration is correctly set up to serve static files:

APACHECopied
Alias /static/ /path/to/your/static/folder/
<Directory /path/to/your/static/folder/>
    Require all granted
</Directory>

Additional Troubleshooting

1. Try using the font in a simple HTML file outside of Django to isolate if it's a Django issue or a font usage issue
2. Check browser developer tools for any CSS or font loading errors
3. Verify that the font file isn't corrupted by downloading it directly and testing it locally

If the issue persists, it might be helpful to examine your complete CSS and HTML implementation for the font to identify any potential issues with how you're referencing or using the variable font features.