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

  • Wenn Sie die Seite im Webbrowser öffnen, schauen Sie mal in die Fehlerkonsole (Entwickler-Tools) des Webbrowsers. Da sehen sie dann schon entscheidenden Hinweise zu fehlenden Dateien etc.

  • 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/m…-eure-webseiten-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>

    Code
    Code
    1. @font-face {
    Code
    1.   font-family: 'Open Sans';
    Code
    1.   font-style: normal;
    Code
    1.   font-weight: 400;
    Code
    1.   src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
    Code
    1.   src: local('Open Sans Regular'), local('OpenSans-Regular'),
    Code
    1.        url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    Code
    1.        url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    Code
    1.        url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
    Code
    1.        url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    Code
    1.        url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
    Code
    1. }
    Code
    Code
    1. @font-face {
    Code
    1.   font-family: 'Open Sans Condensed';
    Code
    1.   font-style: normal;
    Code
    1.   font-weight: 300;
    Code
    1.   src: url('../fonts/open-sans-condensed-v12-latin-300.eot'); /* IE9 Compat Modes */
    Code
    1.   src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),
    Code
    1.        url('../fonts/open-sans-condensed-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    Code
    1.        url('../fonts/open-sans-condensed-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    Code
    1.        url('../fonts/open-sans-condensed-v12-latin-300.woff') format('woff'), /* Modern Browsers */
    Code
    1.        url('../fonts/open-sans-condensed-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    Code
    1.        url('../fonts/open-sans-condensed-v12-latin-300.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
    Code

    }

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


    WebFontConfig = {


    google: { families: [ 'Roboto:300,400,700' ] }


    };



    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

  • Tolle Erklärung. Aber wenn ich

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

    werden die Schriften fett dargestellt. Was könnte das sein?

    VG Thomas

  • 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

  • Danke für Deine schnelle Info. Ich bin gerade fertig mit dem Upload...jetzt funktioniert`s. Ich habe die Webfonts beim Upload aktiviert gelassen und auf dem Server den Eintrag für Google Webfonts rausgenommen. Dabei wurde die Schrift nicht FETT gestellt. Die Schriften liegen auf dem Server und sind per CSS eingebunden. In der Entwicklerkonsole keine Fehler und keinen Hinweis auf Google Fonts. PRIMA und Danke nochmal.

    LG Thommy