feat(typography): use variable fonts instead of statics one by default #30328
Description
Feature Description
Hi 🙌
I propose replacing the current static fonts for Roboto and Material Symbols with their variable font counterparts.
It will bring minor but valuable improvements especially for newcomers :
- Reduced file sizes and HTTP requests.
- Greater control over font properties (e.g., weight, width).
- Aligns with the latest web standards.
This change would enhance Angular Material’s efficiency, design capabilities, and relevance.
Here is a quick example of new default font import proposal :
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back" />Thank you for considering this request.
Use Case
- Enhance getting started with Angular Material experience
- Promote modern font technologies
- Align with latest web standards
- Better maintenability and performance