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

### 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 :

```html

```

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

Issue không nêu tên tệp, bài kiểm thử hay điểm vào nào. Hãy bắt đầu bằng việc xác định nơi Angular Material hiện đang import hoặc ghi tài liệu về các font tĩnh Roboto và Material Symbols, sau đó so sánh thiết lập đó với các import font biến thiên được đề xuất. Công việc được xem là hoàn tất khi thiết lập font mặc định sử dụng các phiên bản biến thiên tương ứng và trải nghiệm getting-started vẫn giữ kiểu chữ như dự kiến.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.