Webfonts einbinden - Versionsgeschichte

Sebastian.kalms: /* Schritt 5: Font-Variablen festlegen */

2023-04-13T20:24:42Z

Schritt 5: Font-Variablen festlegen

← Nächstältere Version		Version vom 13. April 2023, 20:24 Uhr
Zeile 51:		Zeile 51:

	== Schritt 5: Font-Variablen festlegen ==		== Schritt 5: Font-Variablen festlegen ==

	* 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

	~~<pre>~~
	~~/// 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~~
	~~</pre>~~

	* in css/abstracts/_variables.scss die grundlegenden Einstellungen des Fonts definieren, z. B.		* in css/abstracts/_variables.scss die grundlegenden Einstellungen des Fonts definieren, z. B.
Zeile 115:		Zeile 102:
	font-weight: $font-weight-medium;		font-weight: $font-weight-medium;
	}		}
			</pre>

			* 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

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

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

Sebastian.kalms: /* Schritt 5: Font-Variablen festlegen */

2023-04-13T20:24:19Z

Schritt 5: Font-Variablen festlegen

← Nächstältere Version		Version vom 13. April 2023, 20:24 Uhr
Zeile 51:		Zeile 51:

	== Schritt 5: Font-Variablen festlegen ==		== Schritt 5: Font-Variablen festlegen ==

			* 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

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

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

Sebastian.kalms: /* Schritt 1: Fonts zusammenstellen */

2023-04-13T19:22:32Z

Schritt 1: Fonts zusammenstellen

← Nächstältere Version		Version vom 13. April 2023, 19:22 Uhr
Zeile 2:		Zeile 2:
	== Schritt 1: Fonts zusammenstellen ==		== Schritt 1: Fonts zusammenstellen ==

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

Sebastian.kalms: Sebastian.kalms verschob die Seite Fonts einbinden nach Webfonts einbinden, ohne dabei eine Weiterleitung anzulegen

2023-04-13T19:21:33Z

Sebastian.kalms verschob die Seite Fonts einbinden nach Webfonts einbinden, ohne dabei eine Weiterleitung anzulegen

← Nächstältere Version	Version vom 13. April 2023, 19:21 Uhr
(kein Unterschied)

Sebastian.kalms: Die Seite wurde neu angelegt: „ == Schritt 1: Fonts zusammenstellen == * https://google-webfonts-helper.herokuapp.com/ * benötigte Fonts zusammenstellen == Schritt 2: _fonts.scss anlegen…“

2023-04-13T19:20:07Z

Die Seite wurde neu angelegt: „ == Schritt 1: Fonts zusammenstellen == * https://google-webfonts-helper.herokuapp.com/ * benötigte Fonts zusammenstellen == Schritt 2: _fonts.scss anlegen…“

Neue Seite

== 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]]