Thomasorus Design System

Fonts 

<code>Editorial New Regular</code>
<div style="font-family: 'Editorial New Regular'; font-size:20px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis nemo maiores saepe nihil provident dicta suscipit quibusdam illum veniam, quos voluptatem quae quod aspernatur repellendus et explicabo debitis ut ad?</div>

<br>

<code>Inter Var</code>
<div style="font-family: 'Inter var';">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam possimus unde quidem deserunt sit iste quod, molestias eius veniam? Perferendis recusandae totam qui sit, assumenda debitis quo corrupti numquam accusantium?</div>

<br>

<code>IBM Plex Mono</code>
<div style="font-family: 'IBM Plex Mono';">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam possimus unde quidem deserunt sit iste quod, molestias eius veniam? Perferendis recusandae totam qui sit, assumenda debitis quo corrupti numquam accusantium?</div>
 
<code>Editorial New Regular</code>
<div style="font-family: 'Editorial New Regular'; font-size:20px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis nemo maiores saepe nihil provident dicta suscipit quibusdam illum veniam, quos voluptatem quae quod aspernatur repellendus et explicabo debitis ut ad?</div>

<br>

<code>Inter Var</code>
<div style="font-family: 'Inter var';">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam possimus unde quidem deserunt sit iste quod, molestias eius veniam? Perferendis recusandae totam qui sit, assumenda debitis quo corrupti numquam accusantium?</div>

<br>

<code>IBM Plex Mono</code>
<div style="font-family: 'IBM Plex Mono';">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam possimus unde quidem deserunt sit iste quod, molestias eius veniam? Perferendis recusandae totam qui sit, assumenda debitis quo corrupti numquam accusantium?</div>
 
/* No context defined. */
  • Content: 
    @font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    font-named-instance: 'Regular';
    src: url("../../../css/fonts/Inter-roman.var.woff2?v=3.18") format("woff2");
  }
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("../../../css/fonts/Inter-italic.var.woff2?v=3.18") format("woff2");
}

@font-face {
    font-family: "Editorial New Regular";
    src: url("../../../css/fonts/EditorialNew-Regular.woff2") format("woff2");
    font-style: Regular;
    font-display: swap;
}

@font-face {
    font-family: "Editorial New Light";
    src: url("../../../css/fonts/EditorialNew-Light.woff2") format("woff2");
    font-style: Light;
    font-display: swap;
}


@font-face {
  font-family: "IBM Plex Mono";
  src: url("../../../css/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: Light;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic Regular';
  src: url("../../../css/fonts/OpenDyslexic-Regular.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic Bold';
  src: url('../../../css/fonts/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic Italic';
  src: url('../../../css/fonts/OpenDyslexic-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../../../css/fonts/OpenDyslexic-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexicMono';
  src: url('../../../css/fonts/OpenDyslexicMono-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Atkinson Regular';
  src: url("../../../css/fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Bold';
  src: url('../../../css/fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Italic';
  src: url('../../../css/fonts/Atkinson-Hyperlegible-Italic-102a.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Bold Italic';
  src: url('../../../css/fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Mono';
  src: url('../../../css/fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


html { font-family: 'Inter', sans-serif; }
html[font-style="dislexia"] * { font-family: 'OpenDyslexic Regular', sans-serif; }
html[font-style="atkinson"] * { font-family: 'Atkinson Regular', sans-serif; }

@supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
}

/* Open Dyslexic */

html[font-style="dislexia"] b, html[font-style="dislexia"] strong, html[font-style="dislexia"] dt{
  font-family: 'OpenDyslexic Bold';
}

html[font-style="dislexia"] i, html[dislexia] em, html[dislexia] dt {
  font-family: 'OpenDyslexic Italic';
}

html[font-style="dislexia"] code {
  font-family: 'OpenDyslexicMono';
}


/* Atkinson */

html[font-style="atkinson"] b, html[font-style="atkinson"] strong, html[font-style="atkinson"] dt{
  font-family: 'Atkinson Bold';
}

html[font-style="atkinson"] i, html[dislexia] em {
  font-family: 'Atkinson Italic';
}

html[font-style="atkinson"] code {
  font-family: 'Atkinson Mono';
}
  • URL: /components/raw/fonts/fonts.demo.css
  • Filesystem Path: src/components/design-tokens/fonts/fonts.demo.css
  • Size: 4 KB

No notes defined.