feat(typography): use variable fonts instead of statics one by default

[MikaStark]

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,GRAD@20..48,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

[Sepandard]

Hi, I started working on this one.