Externe Schriften einbetten

[harlekin8]

Hi Folks,

anbei eine kleine Anleitung, wie man via die @import-Variante externe Schriften einbetten kann am Bp. von Google Webfonts und Kernest.

1.)In Google-Webfonts (Google Web Fonts)
2.)Schrift über Filter kann man die Suche einschränken (serif, sans-serif usw.) aussuchen z.Bp. "Lobster" --> Quick Use wählen --> URL (roter Bereich - siehe Bild) kopieren

2.)Man öffne z.Bp. die style_font.css aus seinem Design-Ordner
3.)man füge (orange) an oberster Stelle ein -noch vor body & Co. ein:

/* Google Web-Font */
@import url (http://fonts.googleapis.com/css?family=Lobster);
/* Kernest Web-Font */
@import url (http://www.kernest.com/fonts/Schriftbezeichnung);
... weitere Schriften

und trägt an der entspr. Stelle den genauen Schriftnamen ein so wie bei Google Fonts angegeben:

HTML, BODY, INPUT {
    font-family: Lobster,"Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;
    font-size: 0,9em;
}

TD .cell {
    font-family: "Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;
    font-size: 8px;
}
TD .headercell {
    font-family: Lobster,"Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;
    font-size: 11px;
}
...

bei Kernest (http://www.kernest.com) geht es so ähnlich.

Schrift aussuchen, URL aus dem Link kopieren und genaue Schriftbezeichnung, da wo es erwünscht ist eintragen ... das war's.

Schaut zu, dass wenn ihr externe Schriften einsetzt diese frei sind und dass es nicht die einzige Schrift in eure Font-Family ist. Sollte der Google-Webfonts- od. Kernest-Server nicht erreichbar sein, greifen dann die üblichen Schriften in der Reihenfolge wie in Font-Family angegeben:

...
font-family: Lobster,"Lucida Sans Unicode","Lucida Grande","Trebuchet MS",Helvetica,Arial,sans-serif;
...

Diese Methode funktioniert im IE 7-9. Für FF, Safari, Chrome wird noch morgen ergänzt ... ...

Viel Spaß

[voodoo36]

Hallo Ingo, hast du das schon online, das man das auch sehen kann?

[harlekin8]

Hallo Ingo, hast du das schon online, das man das auch sehen kann?

@voodoo
... funktioniert nur im IE 7-9. Kannst ja vergleichen FF und IE ... Den Rest ergänze ich morgen ...



bye

[voodoo36]

schade, wieder keine Lösung für alle Browser... das ist so wie mit CSS 3.0
Welchen Rest?

[harlekin8]

... OK !

es gibt eine Lösung für alle Browser (außer für IE6 und älter) - die sieht ein bißchen anders aus und basiert auf @font-face ... Poste Sie aber nachher noch hier ... das es geht kannst du an der Testseite sehen ! (Nur h1-Überschrift hier !)
Bye

[Paulemann]

Ich vermisse in Deiner Anleitung die Einbindung in der navigation.ccml Ingo (Dein Screenshot).
Dann sollte es doch eigentlich generell funktionieren.
Hatte vor zwei Wochen mal angefangen mit dem Thema, aber leider noch keine Zeit gefunden es weiter zu verfolgen.

[harlekin8]

Hi Folks,

anbei eine kleine Anleitung, wie man externe Schriften einbetten kann - sodaß die entspr. Schriften auf fast (IE 6 und älter nicht !!) allen Fremd-PCs angezeigt werden können. Die Dateien werden auf eurem Webserver mit hochgeladen - so bleibt ihr "unabhängig" von Webfonts-Servern ... Design "Rho".

1.)Auf www.fontsquirrel.com gehen (Fontsquirrel bietet eine Fülle an freien Schriften, besitzt einen Font-Generator mit dem die notwendigen Schriften konvertiert werden können, besitzt schon vorgefertigte Schriften-Kits die alle Formate berücksichtigen (.ttf, .eot, .woff, .svg ) inkl. eine CSS-Datei usw.)

2.)Schriftkit aussuchen (in meinem Beispiel entscheide ich mich für Rabiohead), dowloaden, entpacken und ALLE (! WICHTIG !) 4-Font-Typen im Design-Ordner kopieren.

3.)Die Schrift hier Format (.ttf) füge ich in meinem Schriftenordner (bei Vista unter Systemsteuerung zu finden --> Schriftarten) ein - benötige ich für meine Font-Preview in W2D

4.)Mit einem Grafik-Programm erstelle ich eine GIF-Datei 230x190px: "fontset_myfonset.gif", kopiere sie im meinem Design-Ordner und wird künftig als Preview Schrift anwählbar sein. (siehe Anhang)

5.)in der config.ccml füge ich ein:

<cc:fontset caption="Rabio" preview="fontset_myfontset.gif" compatibility="3" stylesheet="style_myfontset.css">

6.)in der global.ccml einfügen:

<cc:*>Mein Fontset</cc:*>
<cc:asset src="rabioheadwebfont.eot" dst="rabioheadwebfont.eot" obj="rabioeot" noparse="1">
<cc:asset src="rabioheadwebfont.ttf" dst="rabioheadwebfont.ttf" obj="rabiottf" noparse="1">
<cc:asset src="rabioheadwebfont.woff" dst="rabioheadwebfont.woff" obj="rabiowof" noparse="1">
<cc:asset src="rabioheadwebfont.svg" dst="rabioheadwebfont.svg" obj="rabiosvg" noparse="1">

7.) style_myfontset.css erstellen und in meinem Design-Ordner kopieren:
(@font-face sollte ganz oben in der Datei stehen - wichtig ist der orangene Teil)

@font-face {
    font-family: 'RabioheadRegular';
    src: url('../<cc:print value="&rabioeot.url">');
    src: url('../<cc:print value="&rabiowof.url">') format('woff'),
          url('../<cc:print value="&rabiottf.url">') format('truetype'),
          url('../<cc:print value="&rabiosvg.url">#RabioheadRegular') format('svg');
    font-weight: normal;
    font-style: normal;

} 


HTML, BODY, TD, INPUT, SELECT {
    font-family : Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

h1{
  font-family: 'RabioheadRegular', Geneva, Arial, Helvetica, sans-serif;
}
/** Für Formulare und Shopseiten **/

/* Schriftart für Formulartabellen und Formularelemente */
table.formtab td,
table.formtab input,
table.formtab select,
table.formtab textarea {
    font-family : Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

Viele Schritte aber notwendig, da die Browser unterschiedliche und nur bestimmte Fonts-Formate unterstützen.

FF, Chrome, Safari, Opera, iPhone (ab iOS 4.2) --> True Type
IE 7-9 --> .eot-Format (kein ttf)
FF (ab 3.6), Chrome (ab 5) und IE 9 --> WOFF
iPhone (vor. iOS 4.2) --> .svg

Schaut zu, dass wenn ihr externe Schriften einsetzt diese frei sind und dass es nicht die einzige Schrift in eure Font-Family ist.

NACHTRAG: Natürlich könnt ihr auch Schriften nehmen, die auf eurem PC sind - die müßt ihr nur entpr. konvertieren (damit alle Formate zur Verfügung stehen) - dafür gibt es online Dienste so wie oben der Font-Generator von Fontsquirrel ...

UPDATE: Damit alles reibungslos funktioniert, ist es wichtig, dass sich die Schriften auf der selben Domain befinden, wie die betroffene HP. Ein extra-Verzeichnis der z.Bp. via Filezilla eingerichtet wird geht ebenfalls anstandslos.
WAS stark eingeschränkt funktioniert (die Schrift wird von manchen Browser nicht eingelesen), ist wenn die Schriften auf einem externen Server ausgelagert sind - sprich die Homepage ist auf Rechner A und die Schriften auf Rechner B ...

[harlekin8]

Hi,

da es mit obiger Methode manchmal doch nicht immer funzt (meistens mit IE --> eot-Dateien), habe ich hier mal eine Aufstellung für mögliche Ursachen aufgestellt:

1.)Falsche Font-Mime-Typ auf dem Server --> .htaccess-Datei anfertigen mit folgendem Inhalt

AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .otf .ttf

2.)Relative Pfade einsetzen statt absolute, da es zu Fehlinterpretationen der Browser kommen kann. Diese (IE) "denken" dann die Fonts seien auf einem externen Server, was sich mit Punkt 3. beißt

3.)Fonts müssen auf derselben Domain sein

4.)Manchmal werden die Schriften mit font-weight: bold od. was anderes ausgegeben obwohl die Schrift gar nicht dafür ausgelegt ist:
auf font-weight: normal; stellen

@font-face {
    font-family: 'BradBeckerLightRegular';
    src: url('../assets/bradbecker.eot');
    src: url('../assets/bradbecker.eot#') format('eot'),
         url('../assets/bradbecker.wof') format('woff'),
         url('../assets/bradbecker.ttf') format('truetype'),
         url('../assets/bradbecker.svg#BradBeckerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

5.)

Die Internet Explorer Versionen unter 9 haben alle einen Bug im Parser für das src-Attribut. Wenn du darüber mehr als eine Schriftart einbindest, schafft es der IE nicht sie zu laden und meldet einen 404-Fehler. Der Grund dafür ist, dass der IE versucht, alles zwischen den Klammern als eine Datei zu laden. Das zwingt dich das EOT-Format als erstes zu nennen, angehängt mit einer einzelnen Raute #. Der IE denkt dann, dass der Rest der Zeichenfolge ein URL-Fragment ist und lädt nur die EOT-Datei. Alle andere Browser folgen weiter den Spezifikationen und wählen das Format, was sie brauchen.

Quelle hier ...

Da hilft folgende Syntax - in der Reihenfolge und so geschrieben ...

@font-face {
    font-family: 'BradBeckerLightRegular';
    src: url('../assets/bradbecker.eot');
    src: url('../assets/bradbecker.eot#') format('eot'),
         url('../assets/bradbecker.wof') format('woff'),
         url('../assets/bradbecker.ttf') format('truetype'),
         url('../assets/bradbecker.svg#BradBeckerLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Viel Erfolg