Bearbeiten von „Webfonts einbinden“


== Schritt 1: Fonts zusammenstellen ==

* https://google-webfonts-helper.herokuapp.com/
* benötigte Fonts zusammenstellen

== Schritt 2: _fonts.scss anlegen ==

* CSS kopieren, z. B. hind-regular
<pre>
/* 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 */
}
</pre>
* 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.
<pre>
* 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
</pre>
* 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.
<pre>
body {
  font-family: 'Hind', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: break-word;
}
</pre>

== Schritt 5: Font-Variablen festlegen ==

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

<pre>
// ----------------------------------------------------------------------------------------------- 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;
}
</pre>

[[Kategorie:Frontend-Entwicklung]]
[[Kategorie:Web-Entwicklung]]