packages/styles/scss/base/_fonts.scss

   1 @use '~inter-ui/default' with (
   2         $inter-font-path: '~inter-ui/web'
   3 );
   4
   5 @use '~inter-ui/variable' with (
   6         $inter-font-path: '~inter-ui/variable'
   7 );
   8
   9 /*
  10 Only include font faces that we need.
  11 Only used by outdated browsers/os
  12 Minimises the number of font requests made which is then duplicated by the challenge script. This can be removed when the challenge script no longer makes style requests.
  13 */
  14 @include default.weight-400-normal;
  15 @include default.weight-500-normal;
  16 @include default.weight-600-normal;
  17 @include default.weight-700-normal;
  18
  19 @include variable.all;
  20
  21 // --------------------------------------------------------------------------------------
  22
  23 /*
  24 OpenDyslexic font face definition for font face setting
  25 */
  26 $opendyslexic-font-path: '~@proton/styles/assets/fonts';
  27
  28 @font-face {
  29         font-family: OpenDyslexic;
  30         font-style: normal;
  31         font-weight: normal;
  32         font-display: swap;
  33         src:
  34                 local('OpenDyslexic'),
  35                 url('#{$opendyslexic-font-path}/OpenDyslexic-Regular.woff2') format('woff2'),
  36                 url('#{$opendyslexic-font-path}/OpenDyslexic-Regular.woff') format('woff');
  37 }
  38
  39 @font-face {
  40         font-family: OpenDyslexic;
  41         font-style: italic;
  42         font-weight: normal;
  43         font-display: swap;
  44         src:
  45                 local('OpenDyslexic'),
  46                 url('#{$opendyslexic-font-path}/OpenDyslexic-Italic.woff2') format('woff2'),
  47                 url('#{$opendyslexic-font-path}/OpenDyslexic-Italic.woff') format('woff');
  48 }
  49
  50 @font-face {
  51         font-family: OpenDyslexic;
  52         font-style: normal;
  53         font-weight: 600;
  54         font-display: swap;
  55         src:
  56                 local('OpenDyslexic'),
  57                 url('#{$opendyslexic-font-path}/OpenDyslexic-Bold.woff2') format('woff2'),
  58                 url('#{$opendyslexic-font-path}/OpenDyslexic-Bold.woff') format('woff');
  59 }
  60
  61 @font-face {
  62         font-family: OpenDyslexic;
  63         font-style: italic;
  64         font-weight: 600;
  65         font-display: swap;
  66         src:
  67                 local('OpenDyslexic'),
  68                 url('#{$opendyslexic-font-path}/OpenDyslexic-Bold-Italic.woff2') format('woff2'),
  69                 url('#{$opendyslexic-font-path}/OpenDyslexic-Bold-Italic.woff') format('woff');
  70 }
  71
  72 // --------------------------------------------------------------------------------------
  73
  74 :root {
  75         --font-weight-normal: 400;
  76         --font-weight-semibold: 600;
  77         --font-weight-bold: 700;
  78 }
  79
  80 $fallback-fonts: system-ui, sans-serif;
  81
  82 html,
  83 .apply-font {
  84         // Set fallback font stack as default
  85         font-family: var(--setting-font-family, var(--optional-font-family, #{$fallback-fonts}));
  86         font-synthesis: none;
  87         font-weight: var(--font-weight-normal);
  88         font-style: normal;
  89
  90         /* stylelint-disable */
  91         -moz-osx-font-smoothing: grayscale;
  92         -webkit-font-smoothing: antialiased;
  93         font-smoothing: antialiased;
  94         /* stylelint-enable */
  95
  96         // If the browser supports `@supports`, set Inter static if it doesn't support variable fonts
  97         @supports not (font-variation-settings: normal) {
  98                 font-family: var(--setting-font-family, var(--optional-font-family, 'Inter', #{$fallback-fonts}));
  99         }
 100
 101         // If the browser supports `@supports`, set Inter variable if it supports variable fonts
 102         @supports (font-variation-settings: normal) {
 103                 font-family: var(--setting-font-family, var(--optional-font-family, 'InterVariable', #{$fallback-fonts}));
 104         }
 105 }