feat: use variable fonts

Resolves https://github.com/go-vikunja/vikunja/issues/493

frontend/scripts/fonts-subset.sh

@@ -168,32 +168,20 @@ else
 fi
 
 echo "\nOpen Sans"
-# we drop the wdth axis for all
+# we drop the wdth axis and keep only variable weight range
 
 instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=400:700" "OpenSans[wght]"
 
-# we restrict the wght range
-instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=400" "OpenSans-Regular"
-instance_and_subset "${ORIGINAL_FONTS}/OpenSans[wdth,wght].ttf" "wdth=drop wght=700" "OpenSans-Bold"
-
 echo "\nOpen Sans Italic"
-# we drop the wdth axis for all
+# we drop the wdth axis and keep only variable weight range
 
 instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=400:700" "OpenSans-Italic[wght]"
 
-# we restrict the wght range
-instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=400" "OpenSans-RegularItalic"
-instance_and_subset "${ORIGINAL_FONTS}/OpenSans-Italic[wdth,wght].ttf" "wdth=drop wght=700" "OpenSans-BoldItalic"
-
 echo "\nQuicksand"
+# keep only variable weight range
 
 instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=400:700"
 
-# we restrict the wght range
-instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=400" "Quicksand-Regular"
-instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=600" "Quicksand-SemiBold"
-instance_and_subset "${ORIGINAL_FONTS}/Quicksand[wght].ttf" "wght=700" "Quicksand-Bold"
-
 echo "\nSubsetting files complete"
 
 echo ""
@@ -249,27 +237,6 @@ for file in $FONT_FOLDER/*.woff2; do
             Quicksand\[wght\]_*.woff2)
                 update_font_reference "Quicksand\[wght\]" "$basename"
                 ;;
-            Quicksand-Regular_*.woff2)
-                update_font_reference "Quicksand-Regular" "$basename"
-                ;;
-            Quicksand-SemiBold_*.woff2)
-                update_font_reference "Quicksand-SemiBold" "$basename"
-                ;;
-            Quicksand-Bold_*.woff2)
-                update_font_reference "Quicksand-Bold" "$basename"
-                ;;
-            OpenSans-Regular_*.woff2)
-                update_font_reference "OpenSans-Regular" "$basename"
-                ;;
-            OpenSans-RegularItalic_*.woff2)
-                update_font_reference "OpenSans-RegularItalic" "$basename"
-                ;;
-            OpenSans-Bold_*.woff2)
-                update_font_reference "OpenSans-Bold" "$basename"
-                ;;
-            OpenSans-BoldItalic_*.woff2)
-                update_font_reference "OpenSans-BoldItalic" "$basename"
-                ;;
         esac
     fi
 done

frontend/src/styles/fonts.scss

@@ -7,8 +7,7 @@ $unicode-range: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
   U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,\
   U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD";
 
-@supports (font-variation-settings: normal) {
-  @font-face {
+@font-face {
   font-family: 'Quicksand';
   src: url($font-files-path + 'Quicksand[wght]_6d82d68f.woff2') format('woff2-variations');
   src: url($font-files-path + 'Quicksand[wght]_6d82d68f.woff2') format('woff2') tech('variations');
@@ -16,18 +15,18 @@ $unicode-range: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
   font-weight: 400 700;
   font-display: swap;
   unicode-range: $unicode-range;
-  }
+}
 
-  @font-face {
+@font-face {
   font-family: 'Open Sans';
   src: url($font-files-path + 'OpenSans[wght]_e4849d7d.woff2') format('woff2-variations');
   src: url($font-files-path + 'OpenSans[wght]_e4849d7d.woff2') format('woff2') tech('variations');
   font-weight: 400 700;
   font-display: swap;
   unicode-range: $unicode-range;
-  }
+}
 
-  @font-face {
+@font-face {
   font-family: 'Open Sans';
   src: url($font-files-path + 'OpenSans-Italic[wght]_efd8026f.woff2') format('woff2-variations');
   src: url($font-files-path + 'OpenSans-Italic[wght]_efd8026f.woff2') format('woff2') tech('variations');
@@ -35,71 +34,4 @@ $unicode-range: "U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,\
   font-style: italic;
   font-display: swap;
   unicode-range: $unicode-range;
-  }
-}
-
-/* Set up for old browsers */
-@supports not (font-variation-settings: normal) {
-  @font-face {
-    font-family: 'Quicksand';
-    src: url($font-files-path + 'Quicksand-Regular_92ba564e.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Quicksand';
-    src: url($font-files-path + 'Quicksand-SemiBold_c2a9a8d5.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Quicksand';
-    src: url($font-files-path + 'Quicksand-Bold_f945eaa4.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Open Sans';
-    src: url($font-files-path + 'OpenSans-Regular_d6704d12.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Open Sans';
-    src: url($font-files-path + 'OpenSans-RegularItalic_27fb479d.woff2') format('woff2');
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Open Sans';
-    src: url($font-files-path + 'OpenSans-Bold_a05578f2.woff2') format('woff2');
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
-
-  @font-face {
-    font-family: 'Open Sans';
-    src: url($font-files-path + 'OpenSans-BoldItalic_fbf2c1b1.woff2') format('woff2');
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    unicode-range: $unicode-range;
-  }
 }