Wie binde ich Schriftarten ein?

Du kannst deinen Shop mit weiteren Schriftarten erweitern und ihn so noch mehr an deine Vorstellungen anpassen.

Du hast dazu die Möglichkeit entweder auf extern liegende Schriftarten zuzugreifen oder aus der Auswahl von Google Webfonts wählen.

 

Eine externe Schriftart einbinden

 

Benutze folgenden Code in deinem CSS-Editor:

@font-face {
font-family: 'MyWebFont';
src: url('http://www.pathToMyWebFont/webfont.eot'); /* IE9 Compat Modes */
src: url('http://www.pathToMyWebFont/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('http://www.pathToMyWebFont/webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('http://www.pathToMyWebFont/webfont.woff') format('woff'), /* Pretty Modern Browsers */

url('http://www.pathToMyWebFont/webfont.ttf') format('truetype'), /* Safari, Android, iOS */

url('http://www.pathToMyWebFont/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

 

MyWebFont ersetzt du mit dem Namen deines ausgewählten Fonts.

Webfont ersetzt du durch den Dateinamen deines Fonts.

PathToMyWebFont ersetzt du mit den Pfad zu deinem Font.

Für weitere Anpassungen ersetzst du Element durch das gewünschte CSS Element, wie body, h1, h2, etc., dass die Schriftart übernehmen soll.

Wir raten dir, einen Fallback zu definieren, falls die Schriftart nicht geladen werden kann. Hierzu eignen sich weitverbreitete Systemfonts wie Helvetica oder Arial.

 

Google Webfonts

Um Schriftarten aus Google Webfonts zu importieren, kannst du dich an dieses Schema wenden:

@import url(//fonts.googleapis.com/css?family=Fontname);

 Die Datenbank von Google bietet dir viele verschiedene Fonts, die du einfach in deinen Shop einbinden kannst.


SUPR Coach
Powered by Zendesk