Ankündigung

Einklappen
Keine Ankündigung bisher.

Google-Fonts auf eigenen Webspace

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Google-Fonts auf eigenen Webspace

    Hallo!

    Ich möchte Google-Schriften auf meinem Webspace hosten. Aber wie binde ich die Schriften richtig ein? Die genutzte CSS-Datei (semantic.mi.js => https://github.com/Semantic-Org/Semantic-UI) ist jedoch komprimiert, daher weiss ich nicht wie ich die Schriftangaben ebenfalls komprimiert einbauen muss. Bei unkomprimierter CSS wäre das kein Problem. (Mir ist es lieber wenn nichts von außerhalb geladen werden muss).

    Hier der Code für die Schriften. Der Code befindet sich in der "lato.css", die CSS-Datei im Pfad "_page/assets". Die Fonts in "_page/assets/lato".

    HTML-Code:
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 400;
      src: local('Lato Regular'), local('Lato-Regular'), url(/_page/assets/lato/400.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 700;
      src: local('Lato Bold'), local('Lato-Bold'), url(/_page/assets/lato/700.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: normal;
      font-weight: 900;
      src: local('Lato Black'), local('Lato-Black'), url(/_page/assets/lato/900.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 400;
      src: local('Lato Italic'), local('Lato-Italic'), url(/_page/assets/lato/400italic.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 700;
      src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(/_page/assets/lato/700italic.woff) format('woff');
    }
    @font-face {
      font-family: 'Lato';
      font-style: italic;
      font-weight: 900;
      src: local('Lato Black Italic'), local('Lato-BlackItalic'), url(/_page/assets/lato/900italic.woff) format('woff');
    }

    Und hier der Code aus der semantic.min.js (nur das was für die Schrifteinbindung wichtig ist).

    HTML-Code:
    @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);*,:after,:....
    Danke!

    Gruß, René

  • #2
    Um die Frage selber zu beantworten:
    Man muss die "semantic.js" nehmen. Leider haben die Programmierer die Datei nicht mit "complete" ergänzt ("complete" bedeutet ja so viel wie "unkomprimiert"), sodass Laien leicht durcheinander kommen. Normalerweise ist es ja "üblich" dass Programmierer z.B. "jquery.complete.js schreiben. In der semantic.js kann man dann "wie gewohnt" die Fonts ersetzen/ergänzen, ohne alles zu zerschießen.

    Kommentar

    Lädt...
    X