Webfonts einbinden

Schritt 1: Fonts zusammenstellen

• google-webfonts-helper https://gwfh.mranftl.com/fonts
• benötigte Fonts zusammenstellen

Schritt 2: _fonts.scss anlegen

• CSS kopieren, z. B. hind-regular

/* hind-regular - latin */
@font-face {
  font-family: 'Hind';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/hind-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Hind Regular'), local('Hind-Regular'),
       url('../fonts/hind-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/hind-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/hind-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/hind-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/hind-v10-latin-regular.svg#Hind') format('svg'); /* Legacy iOS */
}

• in Datei css/base/_fonts.scss kopieren
• Grundlage ist die SASS-Architektur: https://sass-guidelin.es/de/#das-7-1-muster

Schritt 3: Font-Dateien downloaden und im Projekt ablegen

• Dateien downloaden, z. B.

* hind-v10-latin-regular.eot?#iefix
* hind-v10-latin-regular.woff2
* hind-v10-latin-regular.woff
* hind-v10-latin-regular.ttf
* hind-v10-latin-regular.svg#Hind

• in Ordner fonts kopieren, z. B. themes/sehanka-base-theme/fonts

Schritt 4: Standard-Font festlegen

• in css/base/_fonts.scss die grundlegenden Einstellungen des Fonts definieren, z. B.

body {
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

Schritt 5: Font-Variablen festlegen

• in css/abstracts/_variables.scss die grundlegenden Einstellungen des Fonts definieren, z. B.

// ----------------------------------------------------------------------------------------------- TEXT

// -------------------------------------------------------------------- Font Families
$font-family-first: 'Hind', 'Helvetica', 'Arial', sans-serif !default;
$font-family-second: 'PT Mono', monospace;

// -------------------------------------------------------------------- Font Sizes
$font-size-xxxl: 100px;
$font-size-xxl: 50px;
$font-size-xl: 50px;
$font-size-l: 30px;
$font-size-m: 25px;
$font-size-s: 18px;
$font-size-xs: 16px;
$font-size-xxs: 12px;

// -------------------------------------------------------------------- Font Weights
$font-weight-black: 900;
$font-weight-bold: 700;
$font-weight-medium: 300;

// -------------------------------------------------------------------- Fonts
@mixin font-first {
  font-family: $font-family-first;
  font-style: normal;
  font-weight: $font-weight-medium;
}
@mixin font-second {
  font-family: $font-family-first;
  font-style: normal;
  font-weight: $font-weight-bold;
}
@mixin font-third {
  font-family: $font-family-first;
  font-style: italic;
  font-weight: $font-weight-bold;
}
@mixin font-fourth {
  font-family: $font-family-first;
  font-style: normal;
  font-weight: $font-weight-black;
}
@mixin font-fifth {
  font-family: $font-family-second;
  font-style: normal;
  font-weight: $font-weight-medium;
}

• ggf. gleich mobile Größen angeben, z. B. via CSS Function clamp() mit min und max font-size --> nutze Umrechnung px to rem: https://nekocalc.com/px-to-rem-converter

/// Headings

$h1-size: clamp(2.0rem, 4vw, 2.625rem); // min 32px, max 42px
$h2-size: clamp(1.375rem, 3vw, 2.0rem); // min 22px, max 32px
$h3-size: clamp(1.125rem, 2.5vw, 1.375rem); // min 18px, max 22px
$h4-size: clamp(1.0rem, 2.75vw, 1.125rem); // min 16px, max 18px
$h5-size: clamp(0.875rem, 2.75vw, 1.0rem); // min 14px, max 16px
$h6-size: clamp(0.875rem, 2.75vw, 0.875rem); // min 14px, max 14px