Merge pull request #160 from bartaz/fix-ubuntu-font

Add new Ubuntu variable font to custom CSS
canonical · Jan 9, 2024 · 70b1bb3 · 70b1bb3
2 parents b038d75 + 78b53c5
commit 70b1bb3
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 8 deletions.
diff --git a/.sphinx/_static/custom.css b/.sphinx/_static/custom.css
@@ -1,13 +1,119 @@
-/** Fix the font weight (300 for normal, 400 for slightly bold) **/
-
-div.page, h1, h2, h3, h4, h5, h6, .sidebar-tree .current-page>.reference, button, input, optgroup, select, textarea, th.head {
-    font-weight: 300
+/**
+    Ubuntu variable font definitions.
+    Based on https://github.com/canonical/vanilla-framework/blob/main/scss/_base_fontfaces.scss
+
+    When font files are updated in Vanilla, the links to font files will need to be updated here as well.
+*/
+
+/* default font set */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/f1ea362b-Ubuntu%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
+}
+
+@font-face {
+  font-family: 'Ubuntu variable';
+  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('https://assets.ubuntu.com/v1/90b59210-Ubuntu-Italic%5Bwdth,wght%5D-latin-v0.896a.woff2') format('woff2-variations');
+}
+
+@font-face {
+  font-family: 'Ubuntu Mono variable';
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/d5fc1819-UbuntuMono%5Bwght%5D-latin-v0.869.woff2') format('woff2-variations');
+}
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/77cd6650-Ubuntu%5Bwdth,wght%5D-cyrillic-extended-v0.896a.woff2') format('woff2-variations');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+/* cyrillic */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/2702fce5-Ubuntu%5Bwdth,wght%5D-cyrillic-v0.896a.woff2') format('woff2-variations');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* greek-ext */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/5c108b7d-Ubuntu%5Bwdth,wght%5D-greek-extended-v0.896a.woff2') format('woff2-variations');
+  unicode-range: U+1F00-1FFF;
+}
+
+/* greek */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/0a14c405-Ubuntu%5Bwdth,wght%5D-greek-v0.896a.woff2') format('woff2-variations');
+  unicode-range: U+0370-03FF;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Ubuntu variable';
+  font-stretch: 100%; /*  min and max value for the width axis, expressed as percentage */
+  font-style: normal;
+  font-weight: 100 800; /*  min and max value for the weight axis */
+  src: url('https://assets.ubuntu.com/v1/19f68eeb-Ubuntu%5Bwdth,wght%5D-latin-extended-v0.896a.woff2') format('woff2-variations');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+
+/** Define font-weights as per Vanilla
+    Based on: https://github.com/canonical/vanilla-framework/blob/main/scss/_base_typography-definitions.scss
+
+    regular text: 400,
+    bold: 550, 
+    thin: 300, 
+
+    h1: bold,
+    h2: 180;
+    h3: bold,
+    h4: 275,
+    h5: bold,
+    h6: regular
+*/
+
+/* default regular text */
+html {
+    font-weight: 400;
 }
 
-.toc-tree li.scroll-current>.reference, dl.glossary dt, dl.simple dt, dl:not([class]) dt {
-    font-weight: 400;
+/* heading specific definitions */
+h1, h3, h5 { font-weight: 550; }
+h2 { font-weight: 180; }
+h4 { font-weight: 275; }
+
+/* bold */
+.toc-tree li.scroll-current>.reference,
+dl.glossary dt,
+dl.simple dt,
+dl:not([class]) dt {
+    font-weight: 550;
 }
 
+
 /** Table styling **/
 
 th.head {

diff --git a/.sphinx/_static/furo_colors.css b/.sphinx/_static/furo_colors.css
@@ -1,8 +1,9 @@
 body {
     --color-code-background: #f8f8f8;
     --color-code-foreground: black;
-    --font-stack: Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    --font-stack--monospace: Ubuntu Mono, Consolas, Monaco, Courier, monospace;
+    --code-font-size: 1rem;
+    --font-stack: Ubuntu variable, Ubuntu, -apple-system, Segoe UI, Roboto, Oxygen, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+    --font-stack--monospace: Ubuntu Mono variable, Ubuntu Mono, Consolas, Monaco, Courier, monospace;
     --color-foreground-primary: #111;
     --color-foreground-secondary: var(--color-foreground-primary);
     --color-foreground-muted: #333;