Typografie

Für die Online-Kanäle kommt durchgängig die Google-Schrift Inter zur Anwendung. Die verfügbaren Schriftschnitte sind im untersten Teil als Font Face gelistet.

Hinweis

Punktuell, etwa für das Testimonial-Element kommt die Schriftart Spectral zum Einsatz.

Headings

Für Titelelemente sollte das semantische HTML mit folgerichtiger Anordnung Beachtung finden. Der H1-Tag sollte nur einmal pro Seite eingesetzt und immer an erster Stelle im Artikel positioniert sein. Der H1-Tag wird immer mit einer gelben 4px hohen und 80px breiten Linie angezeigt.

Die Überschriften H2 bis H6 sollten in der logischen Reihenfolge eingesetzt werden. Die Überschrift H1 sollte dabei nicht in einem anderen Element, wie z.B. einem <header> oder <main>, verwendet werden. Der H2-Tag hat eine graue 4px hohe Linie die sich über die gesamte Breite des Inhalts ausdehnt.

Pure H1 tag without class

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Paragraph mit h-Elementen

Alternativ können Titelelemente auch mit einem Paragraph eingesetzt werden. Diese Kombination stellt eine Ausnahme dar und findet in den meisten Fällen keine Anwendung.

h1. Bootstrap heading with paragraph tag

h2. Bootstrap heading with paragraph tag

h3. Bootstrap heading with paragraph tag

h4. Bootstrap heading with paragraph tag

h5. Bootstrap heading with paragraph tag

h6. Bootstrap heading with paragraph tag

1
2  // Heading Tags
3  <h1>Pure heading tag without className</h1>
4  <h2>Heading H2</h2>
5  <h3>Heading H3</h3>
6  <h4>Heading H4</h4>
7  <h5>Heading H4</h5>
8  <h6>Heading H4</h6>
9
10  // Paragraph tag as heading
11  <p class="h1">h1. Bootstrap heading with paragraph tag</p>
12  <p class="h2">h2. Bootstrap heading with paragraph tag</p>
13  <p class="h3">h3. Bootstrap heading with paragraph tag</p>
14  <p class="h4">h4. Bootstrap heading with paragraph tag</p>
15  <p class="h5">h5. Bootstrap heading with paragraph tag</p>
16  <p class="h6">h6. Bootstrap heading with paragraph tag</p>
17

1
2  // Heading Tags
3  <h1>Pure heading tag without className</h1>
4  <h2>Heading H2</h2>
5  <h3>Heading H3</h3>
6  <h4>Heading H4</h4>
7  <h5>Heading H4</h5>
8  <h6>Heading H4</h6>
9
10  // Paragraph tag as heading
11  <p class="h1">h1. Bootstrap heading with paragraph tag</p>
12  <p class="h2">h2. Bootstrap heading with paragraph tag</p>
13  <p class="h3">h3. Bootstrap heading with paragraph tag</p>
14  <p class="h4">h4. Bootstrap heading with paragraph tag</p>
15  <p class="h5">h5. Bootstrap heading with paragraph tag</p>
16  <p class="h6">h6. Bootstrap heading with paragraph tag</p>
17

Paragraph

Hinweis Für den Leadtext stehen zwei CSS-Klassen zur Verfügung: .lead für die neue Version 5. Alternativ darf auch die CSS-Klasse .text__lead wie im Styleguide V4 zur Anwendung kommen. Bevorzugt ist die CSS-Klasse .lead anzuwenden.

Paragraph "lead-text"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis eos, commodi autem porro, ex quo odio illo quas nisi ratione sunt, delectus cum quam ad voluptatibus. Quia dolores natus veritatis veniam, officiis aperiam sed laboriosam consectetur repellendus commodi sit, exercitationem sint magni illo maxime fugiat blanditiis aut error quas odio mollitia minima ratione nostrum modi? Maxime ipsa nihil quasi excepturi assumenda eum! Iusto, beatae? Perspiciatis doloremque minus, explicabo nisi illo aspernatur. Eaque perferendis culpa dolores et mollitia, vero officiis. Praesentium eligendi nam quas distinctio ex doloribus minima odio! Eius doloremque nihil odit harum, non labore. Recusandae facere aliquam porro placeat?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore, dolores! Impedit eveniet deleniti maiores tenetur eum officia vel eos, dignissimos cumque? Natus tempore earum facere porro a vel dolores dicta.

Standard Paragraph für den Fliesstext

Lorem ipsum dolor, dolor sit amet consectetur adipisicing elit. Nemo adipisci quae veniam ab cupiditate, autem ut qui consectetur optio quas voluptatum, neque minus sequi. Consectetur recusandae quaerat corporis vero porro libero est doloribus! Quos tempore, laudantium ullam aliquid distinctio id exercitationem quas odio similique libero harum numquam veritatis officiis, aspernatur voluptatem! Rem consectetur est incidunt dicta saepe eum, error iure nulla excepturi asperiores quos, dolore explicabo ad id hic illo perferendis provident laudantium. Adipisci molestias consequuntur ex atque nostrum placeat, ratione, dolor quidem eum tempora asperiores officiis ea eos cumque. Magni ab facere eligendi temporibus fugit porro odit dolor velit!

1
2  // Lead text
3  <p class="lead">
4    Lorem ipsum <a href="#">dolor sit amet consectetur adipisicing elit</a>.
5    Veritatis eos, commodi autem porro, ex quo odio illo quas nisi ratione
6    sunt, delectus cum quam ad voluptatibus. Quia dolores natus veritatis
7    veniam, officiis aperiam sed laboriosam consectetur repellendus commodi
8    sit, exercitationem sint magni illo maxime fugiat blanditiis aut error
9    quas odio mollitia minima ratione nostrum modi? Maxime ipsa nihil quasi
10    excepturi assumenda eum! Iusto, beatae? Perspiciatis doloremque minus,
11    explicabo nisi illo aspernatur. Eaque perferendis culpa dolores et
12    mollitia, vero officiis. Praesentium eligendi nam quas distinctio ex
13    doloribus minima odio! Eius doloremque nihil odit harum, non labore.
14    Recusandae facere aliquam porro placeat?
15  </p>
16
17  // Optional lead text class (as in styleguide V4)
18  <p class="text__lead">
19    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore,
20    dolores! Impedit eveniet deleniti maiores tenetur eum officia vel eos,
21    dignissimos cumque? Natus tempore earum facere porro a vel dolores
22    dicta.
23  </p>
24
25  // Paragraph
26  <p>
27    Lorem ipsum <a href="#">dolor sit amet consectetur adipisicing elit</a>.
28    Veritatis eos, commodi autem porro, ex quo odio illo quas nisi ratione
29    sunt, delectus cum quam ad voluptatibus. Quia dolores natus veritatis
30    veniam, officiis aperiam sed laboriosam consectetur repellendus commodi
31    sit, exercitationem sint magni illo maxime fugiat blanditiis aut error
32    quas odio mollitia minima ratione nostrum modi? Maxime ipsa nihil quasi
33    excepturi assumenda eum! Iusto, beatae? Perspiciatis doloremque minus,
34    explicabo nisi illo aspernatur. Eaque perferendis culpa dolores et
35    mollitia, vero officiis. Praesentium eligendi nam quas distinctio ex
36    doloribus minima odio! Eius doloremque nihil odit harum, non labore.
37    Recusandae facere aliquam porro placeat?
38  </p>
39

1
2  // Lead text
3  <p class="lead">
4    Lorem ipsum <a href="#">dolor sit amet consectetur adipisicing elit</a>.
5    Veritatis eos, commodi autem porro, ex quo odio illo quas nisi ratione
6    sunt, delectus cum quam ad voluptatibus. Quia dolores natus veritatis
7    veniam, officiis aperiam sed laboriosam consectetur repellendus commodi
8    sit, exercitationem sint magni illo maxime fugiat blanditiis aut error
9    quas odio mollitia minima ratione nostrum modi? Maxime ipsa nihil quasi
10    excepturi assumenda eum! Iusto, beatae? Perspiciatis doloremque minus,
11    explicabo nisi illo aspernatur. Eaque perferendis culpa dolores et
12    mollitia, vero officiis. Praesentium eligendi nam quas distinctio ex
13    doloribus minima odio! Eius doloremque nihil odit harum, non labore.
14    Recusandae facere aliquam porro placeat?
15  </p>
16
17  // Optional lead text class (as in styleguide V4)
18  <p class="text__lead">
19    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore,
20    dolores! Impedit eveniet deleniti maiores tenetur eum officia vel eos,
21    dignissimos cumque? Natus tempore earum facere porro a vel dolores
22    dicta.
23  </p>
24
25  // Paragraph
26  <p>
27    Lorem ipsum <a href="#">dolor sit amet consectetur adipisicing elit</a>.
28    Veritatis eos, commodi autem porro, ex quo odio illo quas nisi ratione
29    sunt, delectus cum quam ad voluptatibus. Quia dolores natus veritatis
30    veniam, officiis aperiam sed laboriosam consectetur repellendus commodi
31    sit, exercitationem sint magni illo maxime fugiat blanditiis aut error
32    quas odio mollitia minima ratione nostrum modi? Maxime ipsa nihil quasi
33    excepturi assumenda eum! Iusto, beatae? Perspiciatis doloremque minus,
34    explicabo nisi illo aspernatur. Eaque perferendis culpa dolores et
35    mollitia, vero officiis. Praesentium eligendi nam quas distinctio ex
36    doloribus minima odio! Eius doloremque nihil odit harum, non labore.
37    Recusandae facere aliquam porro placeat?
38  </p>
39

Listenelemente

Es stehen vier Typen für Listenelemente zur Verfügung. Häufige Verwendung finden die ungeordneten und nummerierte Listen. Die unstyled- und inline Listen finden wenig bis kaum Anwendung. Sie sind hier dennoch beispielhaft dargestellt.

Unordered list

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
- Inline list 1
- Inline list 2
- Inline list 3
  - Inline list 1
  - Inline list 2
  - Inline list 3
Facilisis in pretium nisl aliquet

Numbered list

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet

List unstyled

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - - Phasellus iaculis neque
    - Purus sodales ultricies
    - - Phasellus iaculis neque
      - Purus sodales ultricies
      - Vestibulum laoreet porttitor sem
      - Ac tristique libero volutpat at
    - Ac tristique libero volutpat at
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

List inline

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, dolor.

1
2  // Unordered list
3  <ul class="mb-5">
4    <li>Lorem ipsum dolor sit amet</li>
5    <li>Consectetur adipiscing elit</li>
6    <li>Integer molestie lorem at massa</li>
7    <li>Facilisis in pretium nisl aliquet</li>
8  </ul>
9
10  // Ordered list
11  <ol class="mb-5">
12    <li>Lorem ipsum dolor sit amet</li>
13    <li>Consectetur adipiscing elit</li>
14    <li>Integer molestie lorem at massa</li>
15    <li>Facilisis in pretium nisl aliquet</li>
16  </ol>
17
18  // Unstyled listing
19  <ul class="list-unstyled mb-5">
20    <li>Lorem ipsum dolor sit amet</li>
21    <li>Consectetur adipiscing elit</li>
22    <li>Integer molestie lorem at massa</li>
23    <li>Facilisis in pretium nisl aliquet</li>
24    <li>
25      Nulla volutpat aliquam velit
26      <ul>
27        <li>Phasellus iaculis neque</li>
28        <li>Purus sodales ultricies</li>
29        <li>
30          <ul>
31            <li>Phasellus iaculis neque</li>
32            <li>Purus sodales ultricies</li>
33            <li>Vestibulum laoreet porttitor sem</li>
34            <li>Ac tristique libero volutpat at</li>
35          </ul>
36        </li>
37        <li>Ac tristique libero volutpat at</li>
38      </ul>
39    </li>
40    <li>Faucibus porta lacus fringilla vel</li>
41    <li>Aenean sit amet erat nunc</li>
42    <li>Eget porttitor lorem</li>
43  </ul>
44
45  // Arrow list
46  <ul class="list-arrow">
47    <li>
48      <a href="#">Lorem ipsum dolor sit amet.</a>
49    </li>
50    <li>
51      Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita,
52      repellendus!
53    </li>
54  </ul>
55
56  // Inline listing
57  <ul class="list-inline">
58    <li>Lorem ipsum dolor sit amet.</li>
59    <li>
60      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
61      dolor.
62    </li>
63  </ul>
64

1
2  // Unordered list
3  <ul class="mb-5">
4    <li>Lorem ipsum dolor sit amet</li>
5    <li>Consectetur adipiscing elit</li>
6    <li>Integer molestie lorem at massa</li>
7    <li>Facilisis in pretium nisl aliquet</li>
8  </ul>
9
10  // Ordered list
11  <ol class="mb-5">
12    <li>Lorem ipsum dolor sit amet</li>
13    <li>Consectetur adipiscing elit</li>
14    <li>Integer molestie lorem at massa</li>
15    <li>Facilisis in pretium nisl aliquet</li>
16  </ol>
17
18  // Unstyled listing
19  <ul class="list-unstyled mb-5">
20    <li>Lorem ipsum dolor sit amet</li>
21    <li>Consectetur adipiscing elit</li>
22    <li>Integer molestie lorem at massa</li>
23    <li>Facilisis in pretium nisl aliquet</li>
24    <li>
25      Nulla volutpat aliquam velit
26      <ul>
27        <li>Phasellus iaculis neque</li>
28        <li>Purus sodales ultricies</li>
29        <li>
30          <ul>
31            <li>Phasellus iaculis neque</li>
32            <li>Purus sodales ultricies</li>
33            <li>Vestibulum laoreet porttitor sem</li>
34            <li>Ac tristique libero volutpat at</li>
35          </ul>
36        </li>
37        <li>Ac tristique libero volutpat at</li>
38      </ul>
39    </li>
40    <li>Faucibus porta lacus fringilla vel</li>
41    <li>Aenean sit amet erat nunc</li>
42    <li>Eget porttitor lorem</li>
43  </ul>
44
45  // Arrow list
46  <ul class="list-arrow">
47    <li>
48      <a href="#">Lorem ipsum dolor sit amet.</a>
49    </li>
50    <li>
51      Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita,
52      repellendus!
53    </li>
54  </ul>
55
56  // Inline listing
57  <ul class="list-inline">
58    <li>Lorem ipsum dolor sit amet.</li>
59    <li>
60      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur,
61      dolor.
62    </li>
63  </ul>
64

Inter Font

Dieser Auszug dient zur Übersicht welche Schriftschnitte zur Anwendung kommen. Diese Schriftschnitte sind bereits im fhnw.css (siehe Download-Paket) implementiert.

1
2  // Inter Font
3  /* cyrillic-ext */
4@font-face {
5    font-family: "Inter";
6    font-style: normal;
7    font-weight: 300;
8    font-display: swap;
9    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
10        format("woff2");
11    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
12        U+FE2E-FE2F;
13}
14/* cyrillic */
15@font-face {
16    font-family: "Inter";
17    font-style: normal;
18    font-weight: 300;
19    font-display: swap;
20    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
21        format("woff2");
22    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
23}
24/* greek-ext */
25@font-face {
26    font-family: "Inter";
27    font-style: normal;
28    font-weight: 300;
29    font-display: swap;
30    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
31        format("woff2");
32    unicode-range: U+1F00-1FFF;
33}
34/* greek */
35@font-face {
36    font-family: "Inter";
37    font-style: normal;
38    font-weight: 300;
39    font-display: swap;
40    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
41        format("woff2");
42    unicode-range: U+0370-03FF;
43}
44/* vietnamese */
45@font-face {
46    font-family: "Inter";
47    font-style: normal;
48    font-weight: 300;
49    font-display: swap;
50    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
51        format("woff2");
52    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
53        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
54}
55/* latin-ext */
56@font-face {
57    font-family: "Inter";
58    font-style: normal;
59    font-weight: 300;
60    font-display: swap;
61    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
62        format("woff2");
63    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
64        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
65}
66/* latin */
67@font-face {
68    font-family: "Inter";
69    font-style: normal;
70    font-weight: 300;
71    font-display: swap;
72    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
73        format("woff2");
74    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
75        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
76        U+2215, U+FEFF, U+FFFD;
77}
78/* cyrillic-ext */
79@font-face {
80    font-family: "Inter";
81    font-style: normal;
82    font-weight: 400;
83    font-display: swap;
84    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
85        format("woff2");
86    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
87        U+FE2E-FE2F;
88}
89/* cyrillic */
90@font-face {
91    font-family: "Inter";
92    font-style: normal;
93    font-weight: 400;
94    font-display: swap;
95    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
96        format("woff2");
97    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
98}
99/* greek-ext */
100@font-face {
101    font-family: "Inter";
102    font-style: normal;
103    font-weight: 400;
104    font-display: swap;
105    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
106        format("woff2");
107    unicode-range: U+1F00-1FFF;
108}
109/* greek */
110@font-face {
111    font-family: "Inter";
112    font-style: normal;
113    font-weight: 400;
114    font-display: swap;
115    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
116        format("woff2");
117    unicode-range: U+0370-03FF;
118}
119/* vietnamese */
120@font-face {
121    font-family: "Inter";
122    font-style: normal;
123    font-weight: 400;
124    font-display: swap;
125    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
126        format("woff2");
127    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
128        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
129}
130/* latin-ext */
131@font-face {
132    font-family: "Inter";
133    font-style: normal;
134    font-weight: 400;
135    font-display: swap;
136    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
137        format("woff2");
138    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
139        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
140}
141/* latin */
142@font-face {
143    font-family: "Inter";
144    font-style: normal;
145    font-weight: 400;
146    font-display: swap;
147    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
148        format("woff2");
149    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
150        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
151        U+2215, U+FEFF, U+FFFD;
152}
153/* cyrillic-ext */
154@font-face {
155    font-family: "Inter";
156    font-style: normal;
157    font-weight: 500;
158    font-display: swap;
159    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
160        format("woff2");
161    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
162        U+FE2E-FE2F;
163}
164/* cyrillic */
165@font-face {
166    font-family: "Inter";
167    font-style: normal;
168    font-weight: 500;
169    font-display: swap;
170    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
171        format("woff2");
172    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
173}
174/* greek-ext */
175@font-face {
176    font-family: "Inter";
177    font-style: normal;
178    font-weight: 500;
179    font-display: swap;
180    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
181        format("woff2");
182    unicode-range: U+1F00-1FFF;
183}
184/* greek */
185@font-face {
186    font-family: "Inter";
187    font-style: normal;
188    font-weight: 500;
189    font-display: swap;
190    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
191        format("woff2");
192    unicode-range: U+0370-03FF;
193}
194/* vietnamese */
195@font-face {
196    font-family: "Inter";
197    font-style: normal;
198    font-weight: 500;
199    font-display: swap;
200    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
201        format("woff2");
202    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
203        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
204}
205/* latin-ext */
206@font-face {
207    font-family: "Inter";
208    font-style: normal;
209    font-weight: 500;
210    font-display: swap;
211    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
212        format("woff2");
213    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
214        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
215}
216/* latin */
217@font-face {
218    font-family: "Inter";
219    font-style: normal;
220    font-weight: 500;
221    font-display: swap;
222    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
223        format("woff2");
224    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
225        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
226        U+2215, U+FEFF, U+FFFD;
227}
228/* cyrillic-ext */
229@font-face {
230    font-family: "Inter";
231    font-style: normal;
232    font-weight: 600;
233    font-display: swap;
234    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
235        format("woff2");
236    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
237        U+FE2E-FE2F;
238}
239/* cyrillic */
240@font-face {
241    font-family: "Inter";
242    font-style: normal;
243    font-weight: 600;
244    font-display: swap;
245    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
246        format("woff2");
247    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
248}
249/* greek-ext */
250@font-face {
251    font-family: "Inter";
252    font-style: normal;
253    font-weight: 600;
254    font-display: swap;
255    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
256        format("woff2");
257    unicode-range: U+1F00-1FFF;
258}
259/* greek */
260@font-face {
261    font-family: "Inter";
262    font-style: normal;
263    font-weight: 600;
264    font-display: swap;
265    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
266        format("woff2");
267    unicode-range: U+0370-03FF;
268}
269/* vietnamese */
270@font-face {
271    font-family: "Inter";
272    font-style: normal;
273    font-weight: 600;
274    font-display: swap;
275    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
276        format("woff2");
277    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
278        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
279}
280/* latin-ext */
281@font-face {
282    font-family: "Inter";
283    font-style: normal;
284    font-weight: 600;
285    font-display: swap;
286    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
287        format("woff2");
288    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
289        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
290}
291/* latin */
292@font-face {
293    font-family: "Inter";
294    font-style: normal;
295    font-weight: 600;
296    font-display: swap;
297    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
298        format("woff2");
299    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
300        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
301        U+2215, U+FEFF, U+FFFD;
302}
303/* cyrillic-ext */
304@font-face {
305    font-family: "Inter";
306    font-style: normal;
307    font-weight: 700;
308    font-display: swap;
309    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
310        format("woff2");
311    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
312        U+FE2E-FE2F;
313}
314/* cyrillic */
315@font-face {
316    font-family: "Inter";
317    font-style: normal;
318    font-weight: 700;
319    font-display: swap;
320    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
321        format("woff2");
322    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
323}
324/* greek-ext */
325@font-face {
326    font-family: "Inter";
327    font-style: normal;
328    font-weight: 700;
329    font-display: swap;
330    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
331        format("woff2");
332    unicode-range: U+1F00-1FFF;
333}
334/* greek */
335@font-face {
336    font-family: "Inter";
337    font-style: normal;
338    font-weight: 700;
339    font-display: swap;
340    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
341        format("woff2");
342    unicode-range: U+0370-03FF;
343}
344/* vietnamese */
345@font-face {
346    font-family: "Inter";
347    font-style: normal;
348    font-weight: 700;
349    font-display: swap;
350    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
351        format("woff2");
352    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
353        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
354}
355/* latin-ext */
356@font-face {
357    font-family: "Inter";
358    font-style: normal;
359    font-weight: 700;
360    font-display: swap;
361    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
362        format("woff2");
363    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
364        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
365}
366/* latin */
367@font-face {
368    font-family: "Inter";
369    font-style: normal;
370    font-weight: 700;
371    font-display: swap;
372    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
373        format("woff2");
374    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
375        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
376        U+2215, U+FEFF, U+FFFD;
377}
378/* cyrillic-ext */
379@font-face {
380    font-family: "Inter";
381    font-style: normal;
382    font-weight: 800;
383    font-display: swap;
384    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
385        format("woff2");
386    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
387        U+FE2E-FE2F;
388}
389/* cyrillic */
390@font-face {
391    font-family: "Inter";
392    font-style: normal;
393    font-weight: 800;
394    font-display: swap;
395    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
396        format("woff2");
397    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
398}
399/* greek-ext */
400@font-face {
401    font-family: "Inter";
402    font-style: normal;
403    font-weight: 800;
404    font-display: swap;
405    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
406        format("woff2");
407    unicode-range: U+1F00-1FFF;
408}
409/* greek */
410@font-face {
411    font-family: "Inter";
412    font-style: normal;
413    font-weight: 800;
414    font-display: swap;
415    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
416        format("woff2");
417    unicode-range: U+0370-03FF;
418}
419/* vietnamese */
420@font-face {
421    font-family: "Inter";
422    font-style: normal;
423    font-weight: 800;
424    font-display: swap;
425    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
426        format("woff2");
427    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
428        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
429}
430/* latin-ext */
431@font-face {
432    font-family: "Inter";
433    font-style: normal;
434    font-weight: 800;
435    font-display: swap;
436    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
437        format("woff2");
438    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
439        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
440}
441/* latin */
442@font-face {
443    font-family: "Inter";
444    font-style: normal;
445    font-weight: 800;
446    font-display: swap;
447    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
448        format("woff2");
449    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
450        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
451        U+2215, U+FEFF, U+FFFD;
452}
453

1
2  // Inter Font
3  /* cyrillic-ext */
4@font-face {
5    font-family: "Inter";
6    font-style: normal;
7    font-weight: 300;
8    font-display: swap;
9    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
10        format("woff2");
11    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
12        U+FE2E-FE2F;
13}
14/* cyrillic */
15@font-face {
16    font-family: "Inter";
17    font-style: normal;
18    font-weight: 300;
19    font-display: swap;
20    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
21        format("woff2");
22    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
23}
24/* greek-ext */
25@font-face {
26    font-family: "Inter";
27    font-style: normal;
28    font-weight: 300;
29    font-display: swap;
30    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
31        format("woff2");
32    unicode-range: U+1F00-1FFF;
33}
34/* greek */
35@font-face {
36    font-family: "Inter";
37    font-style: normal;
38    font-weight: 300;
39    font-display: swap;
40    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
41        format("woff2");
42    unicode-range: U+0370-03FF;
43}
44/* vietnamese */
45@font-face {
46    font-family: "Inter";
47    font-style: normal;
48    font-weight: 300;
49    font-display: swap;
50    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
51        format("woff2");
52    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
53        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
54}
55/* latin-ext */
56@font-face {
57    font-family: "Inter";
58    font-style: normal;
59    font-weight: 300;
60    font-display: swap;
61    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
62        format("woff2");
63    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
64        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
65}
66/* latin */
67@font-face {
68    font-family: "Inter";
69    font-style: normal;
70    font-weight: 300;
71    font-display: swap;
72    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
73        format("woff2");
74    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
75        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
76        U+2215, U+FEFF, U+FFFD;
77}
78/* cyrillic-ext */
79@font-face {
80    font-family: "Inter";
81    font-style: normal;
82    font-weight: 400;
83    font-display: swap;
84    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
85        format("woff2");
86    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
87        U+FE2E-FE2F;
88}
89/* cyrillic */
90@font-face {
91    font-family: "Inter";
92    font-style: normal;
93    font-weight: 400;
94    font-display: swap;
95    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
96        format("woff2");
97    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
98}
99/* greek-ext */
100@font-face {
101    font-family: "Inter";
102    font-style: normal;
103    font-weight: 400;
104    font-display: swap;
105    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
106        format("woff2");
107    unicode-range: U+1F00-1FFF;
108}
109/* greek */
110@font-face {
111    font-family: "Inter";
112    font-style: normal;
113    font-weight: 400;
114    font-display: swap;
115    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
116        format("woff2");
117    unicode-range: U+0370-03FF;
118}
119/* vietnamese */
120@font-face {
121    font-family: "Inter";
122    font-style: normal;
123    font-weight: 400;
124    font-display: swap;
125    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
126        format("woff2");
127    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
128        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
129}
130/* latin-ext */
131@font-face {
132    font-family: "Inter";
133    font-style: normal;
134    font-weight: 400;
135    font-display: swap;
136    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
137        format("woff2");
138    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
139        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
140}
141/* latin */
142@font-face {
143    font-family: "Inter";
144    font-style: normal;
145    font-weight: 400;
146    font-display: swap;
147    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
148        format("woff2");
149    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
150        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
151        U+2215, U+FEFF, U+FFFD;
152}
153/* cyrillic-ext */
154@font-face {
155    font-family: "Inter";
156    font-style: normal;
157    font-weight: 500;
158    font-display: swap;
159    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
160        format("woff2");
161    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
162        U+FE2E-FE2F;
163}
164/* cyrillic */
165@font-face {
166    font-family: "Inter";
167    font-style: normal;
168    font-weight: 500;
169    font-display: swap;
170    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
171        format("woff2");
172    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
173}
174/* greek-ext */
175@font-face {
176    font-family: "Inter";
177    font-style: normal;
178    font-weight: 500;
179    font-display: swap;
180    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
181        format("woff2");
182    unicode-range: U+1F00-1FFF;
183}
184/* greek */
185@font-face {
186    font-family: "Inter";
187    font-style: normal;
188    font-weight: 500;
189    font-display: swap;
190    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
191        format("woff2");
192    unicode-range: U+0370-03FF;
193}
194/* vietnamese */
195@font-face {
196    font-family: "Inter";
197    font-style: normal;
198    font-weight: 500;
199    font-display: swap;
200    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
201        format("woff2");
202    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
203        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
204}
205/* latin-ext */
206@font-face {
207    font-family: "Inter";
208    font-style: normal;
209    font-weight: 500;
210    font-display: swap;
211    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
212        format("woff2");
213    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
214        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
215}
216/* latin */
217@font-face {
218    font-family: "Inter";
219    font-style: normal;
220    font-weight: 500;
221    font-display: swap;
222    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
223        format("woff2");
224    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
225        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
226        U+2215, U+FEFF, U+FFFD;
227}
228/* cyrillic-ext */
229@font-face {
230    font-family: "Inter";
231    font-style: normal;
232    font-weight: 600;
233    font-display: swap;
234    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
235        format("woff2");
236    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
237        U+FE2E-FE2F;
238}
239/* cyrillic */
240@font-face {
241    font-family: "Inter";
242    font-style: normal;
243    font-weight: 600;
244    font-display: swap;
245    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
246        format("woff2");
247    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
248}
249/* greek-ext */
250@font-face {
251    font-family: "Inter";
252    font-style: normal;
253    font-weight: 600;
254    font-display: swap;
255    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
256        format("woff2");
257    unicode-range: U+1F00-1FFF;
258}
259/* greek */
260@font-face {
261    font-family: "Inter";
262    font-style: normal;
263    font-weight: 600;
264    font-display: swap;
265    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
266        format("woff2");
267    unicode-range: U+0370-03FF;
268}
269/* vietnamese */
270@font-face {
271    font-family: "Inter";
272    font-style: normal;
273    font-weight: 600;
274    font-display: swap;
275    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
276        format("woff2");
277    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
278        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
279}
280/* latin-ext */
281@font-face {
282    font-family: "Inter";
283    font-style: normal;
284    font-weight: 600;
285    font-display: swap;
286    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
287        format("woff2");
288    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
289        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
290}
291/* latin */
292@font-face {
293    font-family: "Inter";
294    font-style: normal;
295    font-weight: 600;
296    font-display: swap;
297    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
298        format("woff2");
299    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
300        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
301        U+2215, U+FEFF, U+FFFD;
302}
303/* cyrillic-ext */
304@font-face {
305    font-family: "Inter";
306    font-style: normal;
307    font-weight: 700;
308    font-display: swap;
309    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
310        format("woff2");
311    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
312        U+FE2E-FE2F;
313}
314/* cyrillic */
315@font-face {
316    font-family: "Inter";
317    font-style: normal;
318    font-weight: 700;
319    font-display: swap;
320    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
321        format("woff2");
322    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
323}
324/* greek-ext */
325@font-face {
326    font-family: "Inter";
327    font-style: normal;
328    font-weight: 700;
329    font-display: swap;
330    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
331        format("woff2");
332    unicode-range: U+1F00-1FFF;
333}
334/* greek */
335@font-face {
336    font-family: "Inter";
337    font-style: normal;
338    font-weight: 700;
339    font-display: swap;
340    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
341        format("woff2");
342    unicode-range: U+0370-03FF;
343}
344/* vietnamese */
345@font-face {
346    font-family: "Inter";
347    font-style: normal;
348    font-weight: 700;
349    font-display: swap;
350    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
351        format("woff2");
352    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
353        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
354}
355/* latin-ext */
356@font-face {
357    font-family: "Inter";
358    font-style: normal;
359    font-weight: 700;
360    font-display: swap;
361    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
362        format("woff2");
363    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
364        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
365}
366/* latin */
367@font-face {
368    font-family: "Inter";
369    font-style: normal;
370    font-weight: 700;
371    font-display: swap;
372    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
373        format("woff2");
374    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
375        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
376        U+2215, U+FEFF, U+FFFD;
377}
378/* cyrillic-ext */
379@font-face {
380    font-family: "Inter";
381    font-style: normal;
382    font-weight: 800;
383    font-display: swap;
384    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7W0Q5n-wU.woff2)
385        format("woff2");
386    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
387        U+FE2E-FE2F;
388}
389/* cyrillic */
390@font-face {
391    font-family: "Inter";
392    font-style: normal;
393    font-weight: 800;
394    font-display: swap;
395    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7W0Q5n-wU.woff2)
396        format("woff2");
397    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
398}
399/* greek-ext */
400@font-face {
401    font-family: "Inter";
402    font-style: normal;
403    font-weight: 800;
404    font-display: swap;
405    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7W0Q5n-wU.woff2)
406        format("woff2");
407    unicode-range: U+1F00-1FFF;
408}
409/* greek */
410@font-face {
411    font-family: "Inter";
412    font-style: normal;
413    font-weight: 800;
414    font-display: swap;
415    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7W0Q5n-wU.woff2)
416        format("woff2");
417    unicode-range: U+0370-03FF;
418}
419/* vietnamese */
420@font-face {
421    font-family: "Inter";
422    font-style: normal;
423    font-weight: 800;
424    font-display: swap;
425    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7W0Q5n-wU.woff2)
426        format("woff2");
427    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169,
428        U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
429}
430/* latin-ext */
431@font-face {
432    font-family: "Inter";
433    font-style: normal;
434    font-weight: 800;
435    font-display: swap;
436    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2)
437        format("woff2");
438    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
439        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
440}
441/* latin */
442@font-face {
443    font-family: "Inter";
444    font-style: normal;
445    font-weight: 800;
446    font-display: swap;
447    src: url(https://fonts.gstatic.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2)
448        format("woff2");
449    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
450        U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
451        U+2215, U+FEFF, U+FFFD;
452}
453

Indem Sie diesen Hinweis schliessen oder mit dem Besuch der Seite fortfahren, akzeptieren Sie die Verwendung von Cookies. Weitere Informationen dazu finden Sie unter Datenschutz.

Basiselemente des Styleguides

Schriften & Farben

Formulare

PAAS & SAAS-Elemente

Cookie-Hinweis & Datenschutz

Download Package

Häufig verwendete Elemente