Update imports to the variable font beta #4616

ClementChaumel · 2022-12-06T09:19:34Z

Done

Update imports to the variable font beta

The change seems not to be enough, when I look at the network tab I can see that the static font still gets downloaded instead of the variable one

Not sure where else I should make the change

ClementChaumel · 2022-12-06T11:53:55Z

Ok it imports correctly now but I'm still not sure it uses the variable font as the
font-variation-settings: "wght" 350, "wdth" 73; declaration has no effect whatsoever

bartaz · 2022-12-06T12:18:47Z

Demo: https://vanilla-framework-4616.demos.haus/docs

bartaz · 2022-12-06T12:20:22Z

Latest Percy build: https://percy.io/bb49709b/vanilla-framework/builds/23463708/

bartaz · 2022-12-06T15:06:21Z

scss/_base_fontfaces.scss

+      font-display: $font-display-option;
+      font-family: 'Ubuntu';
+      font-style: normal;
+      font-weight: $font-weight-regular-text;


@ClementChaumel could you try remove this? Maybe this is making the font "fixed" on some font weight, instead of being flexible?

Or we could specify range between 100 and 600?
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight

remove it from fontfaces declarations, set it individually in each heading I would say

It is set on each heading, we need to let browser know which weights are supported by this particular font.

ClementChaumel · 2022-12-07T15:10:19Z

Hey, I added a little tester to display the difference in behaviour between a variable font from google font and ours
https://vanilla-framework-4616.demos.haus/docs/examples/base/variable-font-test

One thing I noticed is that to import the font like that from GF you need to explicitly ask for a range using .. like so wght@200..800

I don't know why the ubuntu font ignores the font-variation-settings property entirely though

fitojb · 2022-12-30T19:31:38Z

Fantastic! It finally solves the fake-weight issue when using Bold (700), and it renders crisp and clear on Ubuntu. It's just missing hinting for Windows (in the interpolated weights) and interpolation to Thin (100) in the Italic style.

fitojb · 2023-01-09T17:15:37Z

In https://vanilla-framework-4616.demos.haus/docs/base/typography#:~:text=Edit%20on%20CodePen-,Strong%20text,-Strong%20text
I think the weight difference when using <strong> needs to be a bit more prominent than it is now. Not an issue that manifested using the static fonts

lyubomir-popov · 2023-01-09T17:57:52Z

@fitojb good catch, we need to point the $font-weight-bold variable to the 500 weight, it is currently set to 400. cc @ClementChaumel

scss/_base_code.scss

scss/_base_fontfaces.scss

scss/_base_forms.scss

bartaz · 2023-01-10T15:08:19Z

templates/docs/examples/base/variable-font-test.html

+
+{% block content %}
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');


drop the unnecessary import

bartaz · 2023-01-10T15:08:57Z

templates/docs/examples/base/variable-font-test.html

+<style>
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
+
+.mono{


do we need custom class names?

I guess we can simply use built-in stuff, like <em> for italic and <code> for mono?

bartaz · 2023-01-10T15:09:14Z

templates/docs/examples/base/variable-font-test.html

+<input id="weight" type="range" min="200" max="800" value="300" step="1" style="appearance: auto" oninput="doTheThing()">
+<label>Width</label>
+<input id="width" type="range" min="75" max="100" value="100" step="1" style="appearance: auto" oninput="doTheThing()">
+<label>Italic</label>


This doesn't seem to do anything, can we drop that?

bartaz · 2023-01-10T15:12:17Z

TODO:

update to latest font files
update docs in typography
update docs in settings fonts
bump version to 3.10
update what's new page with new font information
update status labels in side bar navigation (remove current ones, add "updated" to typography page - unless there is any better page about font)

bartaz · 2023-01-11T08:22:14Z

scss/_base_fontfaces.scss

+        font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+        font-style: italic;
+        font-weight: 100 800; /*  min and max value for the weight axis */
+        src: url('#{$assets-path}c1b12cdf-Ubuntu-Italic[wdth,wght]-latin (1).woff2') format('woff2-variations');


Could we avoid having unnecessary stuff in font URLs?

Having spaces and (1) caused by downloading same name multiple times looks messy and may cause URL encoding issues.
I know that right now it means uploading it again probably, unless someone from backend guys can help us renaming those on asset server.

It's important these URLs look clean and clear.

Oh my bad I didn't think it mattered. Do we want to agree on a format before I reupload them?

templates/docs/examples/base/variable-font.html

templates/docs/whats-new.md

lyubomir-popov · 2023-01-12T13:43:06Z

Well done @ClementChaumel and @bartaz

bartaz

Good to go!

fitojb · 2023-01-13T02:30:19Z

Very happy with the improved weight distribution and proportions of the Mono font. Excellent overall

rink-grey · 2024-02-05T03:21:13Z

@fitojb may i ask how can i get the fixed Ubuntu Mono font file, thanks

bartaz · 2024-02-05T06:42:24Z

@rink-grey Ubuntu fonts (including Mono) are available on Google fonts: https://fonts.google.com/?query=Ubuntu (although it may not be the latest variable font version yet)

Latest available font files are in our repos https://github.com/canonical/Ubuntu-Sans-fonts https://github.com/canonical/Ubuntu-Sans-Mono-fonts

rink-grey · 2024-02-05T09:06:59Z

@bartaz thanks very much!

ClementChaumel added the Don't merge label Dec 6, 2022

bartaz reviewed Dec 6, 2022

View reviewed changes

bartaz reviewed Jan 10, 2023

View reviewed changes

scss/_base_code.scss Outdated Show resolved Hide resolved

bartaz reviewed Jan 10, 2023

View reviewed changes

scss/_base_fontfaces.scss Outdated Show resolved Hide resolved

bartaz reviewed Jan 10, 2023

View reviewed changes

scss/_base_forms.scss Outdated Show resolved Hide resolved

bartaz reviewed Jan 10, 2023

View reviewed changes

bartaz reviewed Jan 11, 2023

View reviewed changes

ClementChaumel added 13 commits January 11, 2023 16:51

Update imports to the variable font beta

2a264d2

Fix import

e6c2637

Simplify down to only one font declaration

2117dae

Remove the font-weight declaration

266d6c8

Add POC for variable google font

4d2a355

Update to import the correct font file

14a04c5

Remove the width variation

3cb8cdd

Add subsets

03f877f

Remove latin subset condition

896812b

Add missing mono font

06c59a7

Fix font family declarations

50c6a53

Fix missing font family declaration

19ec407

Add Ubuntu Mono to the example

557ed45

ClementChaumel added 2 commits January 11, 2023 16:51

Clean up the demo

ddc1807

Add variable font to what's new

16a41b9

ClementChaumel force-pushed the WD-830-create-a-vanilla-branch-to-test-new-font branch from d77dbc2 to 16a41b9 Compare January 11, 2023 15:56

bartaz reviewed Jan 11, 2023

View reviewed changes

templates/docs/examples/base/variable-font.html Outdated Show resolved Hide resolved

bartaz reviewed Jan 11, 2023

View reviewed changes

templates/docs/whats-new.md Show resolved Hide resolved

Update based on review comments

08013d5

bartaz added Review: QA needed Review: Code needed Review: Code +1 and removed Don't merge Review: Code needed labels Jan 11, 2023

Rename font family to avoid clash with cookie policu

242178e

bartaz added the Review: Design needed label Jan 12, 2023

ClementChaumel added 2 commits January 12, 2023 11:15

Add documentation around deprecated option

44e686e

Fix typo

f48568e

bartaz added Review: QA +1 and removed Review: QA needed labels Jan 12, 2023

ClementChaumel added 2 commits January 12, 2023 11:41

Update documentation around font-weights

7ccfda1

Update font weight documentation

ee79368

lyubomir-popov added Review: Design +1 and removed Review: Design needed labels Jan 12, 2023

bartaz approved these changes Jan 12, 2023

View reviewed changes

ClementChaumel merged commit 29d0e09 into main Jan 12, 2023

ClementChaumel deleted the WD-830-create-a-vanilla-branch-to-test-new-font branch January 12, 2023 13:45

fitojb mentioned this pull request Jan 23, 2023

Ubuntu Mono does not follow the standard CPI for monospaced typefaces daltonmaag/ubuntu#73

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update imports to the variable font beta #4616

Update imports to the variable font beta #4616

ClementChaumel commented Dec 6, 2022

ClementChaumel commented Dec 6, 2022

bartaz commented Dec 6, 2022

bartaz commented Dec 6, 2022

bartaz Dec 6, 2022

bartaz Dec 6, 2022

lyubomir-popov Dec 6, 2022 •

edited

bartaz Dec 6, 2022

ClementChaumel commented Dec 7, 2022

fitojb commented Dec 30, 2022 •

edited

fitojb commented Jan 9, 2023

lyubomir-popov commented Jan 9, 2023

bartaz Jan 10, 2023

bartaz Jan 10, 2023

bartaz Jan 10, 2023

bartaz commented Jan 10, 2023 •

edited by ClementChaumel

bartaz Jan 11, 2023 •

edited

anthonydillon Jan 11, 2023

ClementChaumel Jan 11, 2023

lyubomir-popov commented Jan 12, 2023

bartaz left a comment

fitojb commented Jan 13, 2023 •

edited

rink-grey commented Feb 5, 2024

bartaz commented Feb 5, 2024

rink-grey commented Feb 5, 2024

Update imports to the variable font beta #4616

Update imports to the variable font beta #4616

Conversation

ClementChaumel commented Dec 6, 2022

Done

ClementChaumel commented Dec 6, 2022

bartaz commented Dec 6, 2022

bartaz commented Dec 6, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lyubomir-popov Dec 6, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ClementChaumel commented Dec 7, 2022

fitojb commented Dec 30, 2022 • edited

fitojb commented Jan 9, 2023

lyubomir-popov commented Jan 9, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bartaz commented Jan 10, 2023 • edited by ClementChaumel

bartaz Jan 11, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lyubomir-popov commented Jan 12, 2023

bartaz left a comment

Choose a reason for hiding this comment

fitojb commented Jan 13, 2023 • edited

rink-grey commented Feb 5, 2024

bartaz commented Feb 5, 2024

rink-grey commented Feb 5, 2024

lyubomir-popov Dec 6, 2022 •

edited

fitojb commented Dec 30, 2022 •

edited

bartaz commented Jan 10, 2023 •

edited by ClementChaumel

bartaz Jan 11, 2023 •

edited

fitojb commented Jan 13, 2023 •

edited