Khan Cross: CSS und Font von externer Seite runterladen und Offline einbette

Hallo Leute,

habe eine einfache HTML Datei in welche CSS Dateien und Fonts eingebunden wurden sind.
Diese beiden CSS Dateien und Fonts möchte ich runterladen und auf meinen eigenen Server hochladen. Komme aber nicht weiter. Hier der Code:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css'>

Kennt sich jemand damit aus?

Gruss
KC

  1. Hallo Khan Cross,

    Google Web Fonts

    hier kannst du die Schriften die du suchst herunterladen.

    gruss quincunx

  2. habe eine einfache HTML-Datei in welche CSS-Dateien und Fonts eingebunden worden sind.
    Diese beiden CSS-Dateien und Fonts möchte ich runterladen und auf meinen eigenen Server hochladen. Komme aber nicht weiter. Hier der Code:

    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css'>

    Kennt sich jemand damit aus?

    Erstens wirst dich wohl oder übel mit URLs befassen müssen. In einem Codeschnippsel wie dem deinigen oben eine URL erkennen zu können ist eine unabdingbare Grundlage für jedwede Arbeit mit dem Web.

    Hast du das URL-Rätsel gelöst, kannst du die CSS-Daten runterladen. Dein erworbenes URL-Wissen
    kannst du hier nochmals anwenden, um an die URLs der Schriftdateien zu kommen und sie ebenfalls runterzuladen.

    Wenn du bis dahin gekommen bist und die vier Dateien auf deinem Rechner hast, zweimal CSS, zweimal Schrift, kannst du nochmal nachfragen. Wir machen dann weiter mit der magischen Copy&Paste-Technik.

    Zwischendrin diskutieren wir vielleicht noch, ob und unter welchen Umständen es anständig ist, von anderen Seiten Schriftarten und Code, aber auch Bilder, Videos, Musik runterzuladen und dann in das eigene Projekt zu kopieren.
    Weiterhin die Frage, welche Vor- und Nachteile ein CDN wie Googles Webfontangebot hat. Und als Sahnehäubchen, was "offline" bedeutet und warum die Nähe der zwei Wörter "Server" und "offline" so manchem ein schmerzverzerrtes Gesicht beschert.

    1. Hallo,

      Dein erworbenes URL-Wissen kannst du hier nochmals anwenden, um an die URLs der Schriftdateien zu kommen und sie ebenfalls runterzuladen.

      Das ist einfacher gesagt als getan, weil Google Webfonts das CSS abhängig vom User-Agent generiert. Einem Chrome wird beispielsweise nur WOFF ausgeliefert, einem Internet Explorer WOFF und EOT. Ich gehe davon aus, dass alte Nicht-IEs ggf. TTF und SVG erhalten.

      Mathias

  3. Hallo!

    Diese beiden CSS Dateien und Fonts möchte ich runterladen und auf meinen eigenen Server hochladen.

    So funktioniert der Google-Webfont-Service nicht. Es ist ein Webfont-Hosting-Angebot, d.h. die Ladelogik und die Dateien liegen auf den Google-Servern.

    Wenn du nach den Ursprungsdateien suchst, musst du bei den jeweiligen Schriftgestaltern suchen. Die lassen sich über Google finden. Nicht alle Schriften sind herunterladbar und deren Lizenz erlaubt das Hosten auf eigenem Server.

    Die Schrift Oswald gibt es bspw. bei FontSquirrel als OTF zum Download, siehe auch Abel und Satisfy.

    Dieses Format ist nicht fürs Web geeignet und muss in verschiedene Webfont-Formate umgewandelt werden (WOFF, EOT, TTF, SVG – je nachdem, welche Browser unterstützt werden sollen). Die Qualität dieser maschinellen Umwandlung ist oft nicht gut. Ich gehe davon aus, dass die Fonts besser aussehen, wenn sie von Google Webfonts geladen werden.

    Grüße
    Mathias

    1. Hi!

      Wenn du nach den Ursprungsdateien suchst, musst du bei den jeweiligen Schriftgestaltern suchen.

      Oder man stöbert gleich im Google Web Fonts Repository. Da gibt es auch die Source-Dateien der Fonts.

      \0