Font Face: Schrift für Drupal 6 Theme setzen

ScoutX

Captain
Registriert
März 2003
Beiträge
3.833
Vorneweg: Ich habe mit Font Face Deklaration noch nie gearbeitet, habe aber nun eine Page in Arbeit (Künstler), welche andere Styles möchte.
Habe das Garland Stylesheet angepasst, das mit 12px und Verdana als Standard daher kommt.
Auf den Windows Versionen geht Verdana noch, aber ich sitze grade an einer Linux-Kiste.
Gefällt ihm natürlich nicht.

Sodann habe ich Verdana mit den typischen Fontdeklarationen ausgetauscht, die für Linux und Windows üblich sind. All das passt nicht. Für ältere Browser könnte ich immer noch eine Fallback Schriftart angeben.
Man anliegen ist zumindest eine freie Unicode Schriftart oder ähnliches bereitzustellen.
Wie mache ich dies am besten?
http://www.alistapart.com/articles/cssatten
So wie es beschrieben steht, funkioniert es aber nicht (FF3.6, IE8, Chrome)
Code:
body {
  margin: 0;
  padding: 0;
  background: #000000;
  font: 12px/170% Verdana, sans-serif;
  color: #ff0000;
}
So beginnt das unveränderte CSS von Garland. Die .ttf würde z.B in sites/all/files liegen.
 
laut http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Code:
/* Font definition for Internet Explorer */
/*         (*must* be first)             */
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland.ttf) /* can't use format() */;
}
 
/* Font definition for other browsers */
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland.ttf) format("truetype");
}
klappt das? wenn zumindest in allen browsern nichts funktioniert, liegt es wohl eher am server (wenn es die browser auch unterstützen ;)).
 
Funktioniert mittlerweile mit einem Bug.
Das Argument Fontweight wird nicht angenommen.
Hatte normal,bold, italic auf dem Server und der Browser nimmt anscheinend immer den letzten @font face css snippet. In meinem Fall italic

Mein Fehler war: Man muss die Schriftart anscheinend vollständig referenzieren -
die gesamte URL, obwohl Drupal bei anderen Geschichten wie Images seine Verzeichnisstruktur innerhalb des css kennt.
 
ein beispiel bzgl. fett, kursiv usw. siehst du ja weiter unten in dem link. dem link nach würde ich mehrere definitionen so schreiben:
Code:
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland.ttf);
}
 
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland.ttf) format("truetype");
}

@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland bold.ttf);
  font-weight: bold;
}
 
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland bold.ttf) format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland italic.ttf);
  font-style: italic;
}
 
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland italic.ttf) format("truetype");
  font-style: italic;
}
 
Hatte alle drei Schriften mit dem Muster
Code:
@font-face {
  font-family: Garland;
  src: url(sites/all/files/Garland.ttf) format("truetype");
Er nahm immer den letzen @font-face.
Möglicherweise liegt es auch an der Schrift selbt. Werde nachher nochmal eine andere Schrift auf dem Server packen.

Update: Möhlicherweise war es die Schrift oder irgendein Cachefehler auf der Linuxkiste.
Zumindest funktioniert es heute.
Die src: url muss bei Drupal mit / beginnen (/sites/all/files/Garland.ttf). Dann findet Drupal die Schrift auch ohne vollständigen Pfad.
 
Zuletzt bearbeitet:

Ähnliche Themen

Zurück
Oben