Feature/upgrade inter to version 4 (#2746)

* Upgrade to Inter 4

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Upgraded to _Inter_ 4 font family
 - Improved the language localization for Türkçe (`tr`)
 
 ### Fixed

apps/client/src/assets/fonts/inter.css

@@ -1,226 +1,273 @@
+/* Variable fonts usage:
+:root { font-family: "Inter", sans-serif; }
+@supports (font-variation-settings: normal) {
+  :root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
+} */
+@font-face {
+  font-family: InterVariable;
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('InterVariable.woff2') format('woff2');
+}
+@font-face {
+  font-family: InterVariable;
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('InterVariable-Italic.woff2') format('woff2');
+}
+
+/* static fonts */
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 100;
   font-display: swap;
-  src:
+  src: url('Inter-Thin.woff2') format('woff2');
-    url('Inter-Thin.woff2?v=3.19') format('woff2'),
-    url('Inter-Thin.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 100;
   font-display: swap;
-  src:
+  src: url('Inter-ThinItalic.woff2') format('woff2');
-    url('Inter-ThinItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ThinItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 200;
   font-display: swap;
-  src:
+  src: url('Inter-ExtraLight.woff2') format('woff2');
-    url('Inter-ExtraLight.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraLight.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 200;
   font-display: swap;
-  src:
+  src: url('Inter-ExtraLightItalic.woff2') format('woff2');
-    url('Inter-ExtraLightItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraLightItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src:
+  src: url('Inter-Light.woff2') format('woff2');
-    url('Inter-Light.woff2?v=3.19') format('woff2'),
-    url('Inter-Light.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 300;
   font-display: swap;
-  src:
+  src: url('Inter-LightItalic.woff2') format('woff2');
-    url('Inter-LightItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-LightItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src:
+  src: url('Inter-Regular.woff2') format('woff2');
-    url('Inter-Regular.woff2?v=3.19') format('woff2'),
-    url('Inter-Regular.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src:
+  src: url('Inter-Italic.woff2') format('woff2');
-    url('Inter-Italic.woff2?v=3.19') format('woff2'),
-    url('Inter-Italic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src:
+  src: url('Inter-Medium.woff2') format('woff2');
-    url('Inter-Medium.woff2?v=3.19') format('woff2'),
-    url('Inter-Medium.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src:
+  src: url('Inter-MediumItalic.woff2') format('woff2');
-    url('Inter-MediumItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-MediumItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src:
+  src: url('Inter-SemiBold.woff2') format('woff2');
-    url('Inter-SemiBold.woff2?v=3.19') format('woff2'),
-    url('Inter-SemiBold.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src:
+  src: url('Inter-SemiBoldItalic.woff2') format('woff2');
-    url('Inter-SemiBoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-SemiBoldItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
-  src:
+  src: url('Inter-Bold.woff2') format('woff2');
-    url('Inter-Bold.woff2?v=3.19') format('woff2'),
-    url('Inter-Bold.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 700;
   font-display: swap;
-  src:
+  src: url('Inter-BoldItalic.woff2') format('woff2');
-    url('Inter-BoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-BoldItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 800;
   font-display: swap;
-  src:
+  src: url('Inter-ExtraBold.woff2') format('woff2');
-    url('Inter-ExtraBold.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraBold.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 800;
   font-display: swap;
-  src:
+  src: url('Inter-ExtraBoldItalic.woff2') format('woff2');
-    url('Inter-ExtraBoldItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-ExtraBoldItalic.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: normal;
   font-weight: 900;
   font-display: swap;
-  src:
+  src: url('Inter-Black.woff2') format('woff2');
-    url('Inter-Black.woff2?v=3.19') format('woff2'),
-    url('Inter-Black.woff?v=3.19') format('woff');
 }
-
 @font-face {
   font-family: 'Inter';
   font-style: italic;
   font-weight: 900;
   font-display: swap;
-  src:
+  src: url('Inter-BlackItalic.woff2') format('woff2');
-    url('Inter-BlackItalic.woff2?v=3.19') format('woff2'),
-    url('Inter-BlackItalic.woff?v=3.19') format('woff');
 }
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
 @font-face {
-  font-family: 'Inter var';
+  font-family: 'InterDisplay';
-  font-weight: 100 900;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url('InterDisplay-Thin.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 100;
   font-display: swap;
+  src: url('InterDisplay-ThinItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
   font-style: normal;
-  font-named-instance: 'Regular';
+  font-weight: 200;
-  src: url('Inter-roman.var.woff2?v=3.19') format('woff2');
+  font-display: swap;
+  src: url('InterDisplay-ExtraLight.woff2') format('woff2');
 }
 @font-face {
-  font-family: 'Inter var';
+  font-family: 'InterDisplay';
-  font-weight: 100 900;
+  font-style: italic;
+  font-weight: 200;
   font-display: swap;
+  src: url('InterDisplay-ExtraLightItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('InterDisplay-Light.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
   font-style: italic;
-  font-named-instance: 'Italic';
+  font-weight: 300;
-  src: url('Inter-italic.var.woff2?v=3.19') format('woff2');
+  font-display: swap;
+  src: url('InterDisplay-LightItalic.woff2') format('woff2');
 }
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
 @font-face {
-  font-family: 'Inter var experimental';
+  font-family: 'InterDisplay';
-  font-weight: 100 900;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('InterDisplay-Regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('InterDisplay-Italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('InterDisplay-Medium.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url('InterDisplay-MediumItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('InterDisplay-SemiBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('InterDisplay-SemiBoldItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('InterDisplay-Bold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url('InterDisplay-BoldItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('InterDisplay-ExtraBold.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url('InterDisplay-ExtraBoldItalic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url('InterDisplay-Black.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'InterDisplay';
+  font-style: italic;
+  font-weight: 900;
   font-display: swap;
-  font-style: oblique 0deg 10deg;
+  src: url('InterDisplay-BlackItalic.woff2') format('woff2');
-  src: url('Inter.var.woff2?v=3.19') format('woff2');
 }