Schriften einbinden / Download von Google Webfonts

Seit Tagen kniffle ich daran eine von https://google-webfonts-helper.herokuapp.com/fonts heruntergeladene Schrift in den Header einer Webseite (Layout Modern Responsive) einzubinden. Dies ist mir mit gleicher Vorgehensweise bei anderen Webseiten mehrfach gelungen.

Der Pfad in den Testordner heißt: http://www.mecplus.de/test ... gerade ist mir auch aufgefallen, dass diese Seite in Safari nicht angezeigt werden kann, während sie auf dem Ipad und allen anderen Browsern angezeigt wird.

Bis jetzt hatte ich die ITC Bradley über den Link zu http://fast.fonts.net (fonts.com) eingebunden, das sieht so aus http://www.mecplus.de ... es geht um den Slogan "Immer einen Span voraus..."

(Ich hatte versucht die Schrift ohne den Link einzubinden, das ging aber nicht, obwohl eigentlich der Download der Schriften auf dem Server liegt, so dachte ich wenigstens.)

Alternativ versuche ich jetzt die Schrift 'Yellowtail', die ich samt Script über o. g. Google-webfonts-helper bezogen habe, wie folgt einzubinden, aber es gelingt nicht. Sie wird auch nicht im Layout unter den Schriften angezeigt.

1. Attribute unter additional meta <link href='../fonts?family=Yellowtail' rel='stylesheet' type='text/css'>
2. CSS:
   
   .slide h2 {
   color: #fff !important; text-shadow: 1px 1px 0 #000; font-weight: 400; font-size: 20pt; font-family: 'Yellowtail'; }
   
   /* yellowtail-regular - latin */ @font-face { font-family: 'Yellowtail'; font-style: normal; font-weight: 400; src: url('../fonts/yellowtail-v8-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Yellowtail Regular'), local('Yellowtail-Regular'), url('../fonts/yellowtail-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/yellowtail-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/yellowtail-v8-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/yellowtail-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/yellowtail-v8-latin-regular.svg#Yellowtail') format('svg'); /* Legacy iOS */
   }
3. Schriften in Ordner "fonts" auf den Server gelegt, dieser liegt mit den Dateien der Webseite im Testordner http://www.mecplus.de/test

Kann man bei allen Layouts externe Schriften einbinden, oder gibt es auch welche wo dies nicht geht?

Wo könnte der Fehler liegen?

Besten Dank im Voraus.

Dagmar

VIELEN DANK! Das war spitze... Problem gelöst ... ich kannte die Fehlerkonsole nicht

Das Einbinden der GoogleWeb Schriften konnte ich mit den Infos s.u. gut lösen. Die Schriften sind nur nach dem Upload sichtbar, wobei ich noch das Problem hatte, dass sie im Testordner, also quasi eine Ebene tiefer, nicht eingelesen wurden, sondern auf der ersten Ebene der Domain unter ../fonts geladen wurden, ganz egal wo sich meine Datei befand. Dazu war der Tipp mit der Fehlerkonsole des Webbrowsers von Stefan S. klasse.

Download Google Schriften: !!! ACHTUNG WIRD ERST NACH UPLOAD ANGEZEIGT!!!

Allgemeine Infos:

https://www.mittwald.de/blog/mittwald/…eiten-einbindet

ZETA Anleitung

Schriften Download und in Ordner „fonts“ auf den Server legen

https://google-webfonts-helper.herokuapp.com/fonts

Von gleicher Plattform den CSS Code kopieren und in ZETA unter Einstellungen / CSS einbinden:

<style>

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */

  src: local('Open Sans Regular'), local('OpenSans-Regular'),

       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */

       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */

}

@font-face {

  font-family: 'Open Sans Condensed';

  font-style: normal;

  font-weight: 300;

  src: url('../fonts/open-sans-condensed-v12-latin-300.eot'); /* IE9 Compat Modes */

  src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),

       url('../fonts/open-sans-condensed-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

       url('../fonts/open-sans-condensed-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */

       url('../fonts/open-sans-condensed-v12-latin-300.woff') format('woff'), /* Modern Browsers */

       url('../fonts/open-sans-condensed-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */

       url('../fonts/open-sans-condensed-v12-latin-300.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */

}

</style>

OFL (Open Font Licence) pro Schrift prüfen und auch auf den Server legen

https://fonts.google.com/attribution

Einbinden in ZETA:

1. Über Erweitert / Attribute / Webfonts (auf alle anzeigen links unten klicken) / webfonts-deactivate auf 1 stellen

2. Über Erweitert / Attribute / Standard / additional_meta Link einbinden

<link href='../fonts?family= Open Sans, Open Sans Condensed' rel='stylesheet' type='text/css'>

Achtung Groß- und Kleinschreibung bei Schriftnamen beachten. Den genauen Schriftnamen im Quellcode des Schriftendownloads unter font-family: auslesen.

3. Über Einstellungen / CSS den obigen <style> einbinden

Im Browser wäre es falsch, wenn im Quellcode noch folgender Link zu Google Webfonts steht

Und richtig ist dieser Link

<link href='/fonts?family=Open Sans, Open Sans Condensed' rel='stylesheet' type='text/css'>

Öffnen nun den Layouteditor (Menü Website > Layout).

1. Überall, wo Sie hier Namen von Schriftarten eingeben können, können Sie nun auch den Namen Ihres "Webfont" eingeben, also wir im Beispiel hier gezeigt z.B.: Open Sans – besteht der Name der Schriftart aus mehreren Worten, dann setzen Sie den Namen bitte in einfache Anführungszeichen also z.B.: 'Open Sans'

LG Dagmar

Hallo Thommy,

sobald du die Google Webfonts deaktivierst, musst du die gewünschte Schrift auf den Server legen und wie oben beschrieben über Attribute verknüpfen, dann im Layouteditor auswählen oder als Text eintragen (korrekte Schreibweise beachten) und dann ggf. über Einstellungen > CSS formatieren. Am besten testest du mit einem Upload der Seite, denn die Schrift wird erst auf dem Server angezeigt.

Alternativ sind folgende Schriftenfamilien als Standard hinterlegt und können einfach über den Layouteditor ausgewählt werden:

Helvetica Neue, Helvetica, Arial, sans-serif,

Trebuchet MS, Arial, Helvetica, sans-serif

Georgia, Times New Roman, Times, serif

Verdana, Geneva, sans-serif

LG Dagi