Font Embedding/Webfonts in Typolight

Hallo!

Gerade habe ich erfolglos versucht, mit Font Embedding mein Navigationsmenü zu gestalten, indem ich per CSS und @font-face meine Schrift definiert habe. Betrachte ich Beispiel-Seiten, die Webfonts nutzen, im WWW mit meinem Browser, so klappt es problemlos. Deshalb meine Frage: Ist es in Typolight grundsätzlich möglich Font Embedding zu nutzen?
(Da ich etwas unsicher war mit der Definition des CSS für das Navigationsmenü, habe ich ebenfalls versucht das definierte font-face für normale Überschriften zu nutzen, allerdings blieb auch hier der Erfolg aus.)
Für Hinweise oder Tipps wäre ich sehr dankbar! :)

PS: Mich hat es gewundert, dass eine Forum-Suche zu diesem Thema keine Ergebnisse lieferte. Es gibt doch sicherlich noch andere, die auch Webfonts nutzen wollen. ;)
(Hinweis: Ich nutze Typolight in Version 2.7.2)

Hallo jabadoo,

willkommen im TYPOlight-Forum.

Ich habe bisher noch nicht damit gearbeitet; ein Versuch wäre die CSS-Definitionen einmal in das letzte Feld "Eigener Code" einzufügen.

Hi jabadoo,

Zitat:

---

Ist es in Typolight grundsätzlich möglich Font Embedding zu nutzen?

---

Klar. Was du falsch machst, lässt sich aber so nicht sagen.

Zitat:

---

Es gibt doch sicherlich noch andere, die auch Webfonts nutzen wollen.

---

Das wäre sicher so, wenn es browserübergreifend funktionieren würde. Tut es aber nicht... Es bleiben dir sonst immerhin die GraphicalText Extension oder die eigene Einbindung von SIFR.


cheers
Antipitch

Das funktioniert problemlos, wenn Du Dich an die Schnipsel auf webfonts.info hältst.

Carolina

Vielen Dank für die Antworten! :)

Die GraphicalText-Extension habe ich ausprobiert - allerdings liefert sie für mich nicht das gewünschte Ergebnis. Trotz diverser Versuche, CSS und graphicaltext anszupassen, gelingt es mir nicht, die Listenelemente auf eine Zeile zu bringen (siehe Bild 1, hier die letzten beiden Punkte "Über uns" und "So finden Sie uns" im Vergleich zu den vorderen Punkten)). Wenn mir da jemand einen Tip geben könnte, wäre ich sehr dankbar. Ich vermute, es liegt an den unterschiedlichen Längen der Buchstaben?!

Deshalb hatte ich mich nun entschieden, einen Teil der Navigation mit Hilfe von Grafiken umzusetzen und nur den Teil der Navigation, der sich häufig ändern wird, mit Webfonts. Das Font Embedding soll also nur als Teillösung dienen. Es gibt auch eine Variante für diejenigen Browser, die nicht mit Webfonts umgehen können (Hier nutze ich dann die Standard-Fonts).

Ich hatte bereits nach den Hinweise auf webfonts.info mein @font-face definiert und versucht dieses dann im jeweiligen CSS-Selektor zu nutzen. Allerdings führt das leider nicht zum gewünschten Ergebnis, weshalb ich mich an das Forum gewendet habe.

Code:

---

@font-face{font-family:MgOpenCosmetica;src:url(tl_files/Fonts/MgOpenCosmeticaRegular.ttf) format("truetype");font-style:normal;}

#head-box4.mod_navigation li{display:inline;margin-left:15px;font-family:MgOpenCosmetica, Trebuchet MS, sans-serif;font-size:0.8em;}

---

Zitat:

---

Zitat von jabadoo

Wenn mir da jemand einen Tip geben könnte, wäre ich sehr dankbar. Ich vermute, es liegt an den unterschiedlichen Längen der Buchstaben?!

---

Das sieht eher danach aus als würden da margins und paddings vererbt werden. Kann man gut mal auf NULL setzen und sich dann langsam vortasten, wenn man sich Selektoren nicht aus dem Stand finden kann.

Zitat:

---

Zitat von jabadoo

Allerdings führt das leider nicht zum gewünschten Ergebnis, weshalb ich mich an das Forum gewendet habe.

---

Zu welchem Ergebnis führt es denn? Nicht ganz uninteressant zur Fehlersuche ...

MfG, Carolina.

danke für den Hinweis!

Allerdings verwende ich lediglich 2 mal padding-left, mehr nicht. Habe auch schon probiert margin mit einzubauen und auf Null zu setzen, leider auch erfolglos.

Das Font Embedding funktioniert einfach nicht. Text wird einfach in der Standard-Browser-Schrift angezeigt. Ich kann da keinen eindeutigen Fehler finden und weiß auch nicht, wonach ich suchen muss, da meiner Meinung nach die CSS-Definition korrekt ist.

Tu mal das in Dein Stylesheet rein, das kann ich nämlich mit Opera 10 prima sehen - da die Schrift auf meinem Server wohnt, muss das funktionieren:

Code:

---

/* webfonts */
/* Special font-face selector */
@font-face {
  /* "Nickname" you want to refer to later */
  font-family: "opera";
  /* Change the URI to where your font resides */
  src: url("http://files.myopera.com/lucina/files/YanoneTagesschrift.ttf") format("truetype");
}
/* h1,h2,p,a,div.content */
h1,h2,p {
  /* Refer to the "Nickname" to apply it any element you want */
  font-family: "opera","Lucida Grande","Trebuchet MS","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
}

---

Wenn das nicht funktioniert, dann liegts am Browser. Wenn es funktioniert, an Deinen Einstellungen. Das finde ich ne 'win-win'-Situation.
MfG, Carolina.

Edit: Typo im Code

Danke für die Hilfe, Carolina.

Nur leider funktioniert auch das nicht. Weder in Firefox, noch in Safari, noch in Opera. Damit wäre wohl geklärt, dass es zumindest nicht am Browser liegt.

Und weiter geht die Suche... :(

Mit welchen Browser-Versionen versuchst Du es denn? Dieser Code tut problemlos in Opera 10 / Beta 3 von vergangener Woche.

Für FF 3.5 braucht es etwas andere Vorgaben:

Code:

---

@font-face{
font-family:HelveticeNeueStd;
src: url("HelveticaNeueLTStd-Roman.otf") format("opentype");
}

h1, h2{
font-family:HelveticeNeueStd,"Lucida Grande","Trebuchet MS","Bitstream Vera Sans",Verdana,Helvetica,sans-serif;
}

---

Die Browser haben das leider noch unterschiedliche Vorgaben, wo die Fonts liegen müssen (lokal, vollständige URLs, etc).

Musst Du mal ein wenig herumprobieren, bis Du alle beisammen hast.

MfG, Carolina.

Danke für den Tipp. Ich werde es mal ausprobieren.

Falls das Thema noch aktuell ist ...

1. Im BE ein Stylesheet anlegen
2. Neue Formatdefinition erstellen
3. Bei Selektor "@font-face" (ohne Anführungszeichen) eintragen
4. Bei Eigener Code z.B: "font-family: GraublauWeb;
   src: url("/tl_files/fonts/GraublauWeb.otf") format("opentype");" eintragen
5. Speichern und schließen
6. Neue Formatdefinition erstellen
7. Bei Selektor z.B: "body" (ohne Anführungszeichen) eintragen
8. Bei Schrift > Schriftarten z.B: "GraublauWeb" (ohne Anführungszeichen) eintragen
9. Speichern und schließen

Wichtig dabei ist, dass die Einbindung @font-face vor der Definition der Schriftart aufgeführt ist.

Die Schriftdateien müssen auf dem Server vorhanden sein, also zuerst im BE hochladen. Der Pfad zur Schriftdatei muss dann entsprechend angepasst werden.
Das Beispiel hier habe ich mit dem Font GraublauWeb von http://www.fonts.info/ gemacht.


edit: hatte aus versehen truetype anstatt opentype geschrieben, jetzt stimmt das obige beispiel.