Integrate Segoe UI Variable

[liberaldev]

This PR enhances font rendering on Windows by adding Segoe UI Variable support with a custom font-face definition to handle weight limitations.

Background

Segoe UI Variable provides superior rendering quality compared to standard Segoe UI. However, it doesn't support font-weight 900, which is used in the application.

Visual Comparison

Before

After

The improved rendering is most noticeable in:

• Smoother letterforms and curves
• Better font hinting at smaller sizes
• More consistent weight distribution across different font sizes

Changes

• Created a custom "Segoe UI Variable Fizzy" font family that:
  • Uses Segoe UI Variable for weights 100-700
  • Falls back to Segoe UI Black for weight 800-900. Because Segoe UI does not have an Extra Bold weight.
  • Supports both normal and italic styles
• Updated --font-sans in _global.css to prioritize "Segoe UI Variable Fizzy" before "Segoe UI"

This approach allows us to benefit from Segoe UI Variable's improved rendering while maintaining full font-weight support.

[jorgemanrubia]

@andyra what do you think?

[andyra]

A couple small suggestions:

• Rename the file to something like font-face.css
• Use @layer base instead of @layer reset
• Add a comment to the CSS file to explain what's going on here—not sure it would be clear unless someone already saw this PR.

[andyra]

👍