search

w3champions / website

The webpage for the www.w3champions.com community project.
46 stars 53 forks source link

Migrate font `inter` from static asset to package dependency #678

Closed Rotzbua closed 1 year ago

Rotzbua commented 1 year ago

Fix

Missing used font weights: 500, 700

Solution

Use variable weight font. Smaller than loading 4 different font weights. (~60kb vs ~30kb)

gustav87 commented 1 year ago

I've only pulled this down and looked at it quick, but it seems to me that the bolder font weight is displayed as bold. I'm looking at the text displayed in the carousel on the front page.

Rotzbua commented 1 year ago

Do you mean the text "Settings -> Switch To Live"? This is actually font weight 700. This font weight is not explicitly supplied. The browser downsizes the font weight from the available 900. This leads to an alias effect and the font looks a bit bigger and different than the "true" 700 font.

edit: You can try with all required fixed font weights: https://github.com/Rotzbua/website/tree/migrate_font_inter_fixed

gustav87 commented 1 year ago

I mean this text here. image

Rotzbua commented 1 year ago

Ok. I am on the test env.

Bolder is a relative value. The normal text is 400 and the bolder weight is 700. So the browser downsizes it from the available 900. https://developer.mozilla.org/en-US/docs/web/CSS/font-weight#meaning_of_relative_weights

variable_test

gustav87 commented 1 year ago

Now I understand what you mean by that it fixes the missing font weights 500 and 700. That is indeed a good change. Just one thing. src/scss/fonts/inter.scss looks a little messy, with quadruple / in front of some weights and double in front of some. Could you clean that up?