Einbindung einer Schriftart mit @font-face 
Author: Ruben A.Hallo,
ich möchte in eine mit Website X5 Evolut10n erstellte Website eine externe Schriftart einbinden, für die ich die Genehmigung erworben habe. Ich habe wenig Ahnung von CSS oder HTML, bin aber nach einigem Durchlesen von Foren und Ähnlichem auf @font-face gestoßen und habe dies erfolglos ausprobiert. Ich weiß, dass dieses Thema auch schon viel in diesem Forum bewegt wurde, doch auch diese Anregungen und Hilfen brachten mich nicht weiter.
Folgende zwei Möglichkeiten habe ich ausprobiert:
zunächst habe ich ein CSS-Datei ("font-face.css") mit diesem Inhalt erstellt:
@font-face {
font-family: 'BiLe';
src: url('bile____.eot');
src: url('bile____.eot?#iefix') format('embedded-opentype'),
url('bile____.woff') format('woff'),
url('bile____.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bi';
src: url('biwi____.eot');
src: url('biwi____.eot?#iefix') format('embedded-opentype'),
url('biwi____.woff') format('woff'),
url('biwi____.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Diese habe ich zusammen mit den entsprechenden Schriftdateien über das Modul HTML und Widgets bei Erweitert meiner Homepage angehängt (die Dateien waren dann alle im Ordner /files). Im Schritt 1 habe ich unter Erweitert vor dem </HEAD> Tag diesen Code eingefügt:
<link href='files/font-face.css' rel='stylesheet' type='text/css' />
Diese Methode zeigte leider keine Wirkung.
In einem anderen Beitrag auf diesem Forum schrieb jemand, dass das Modul HTML und Widgets
eventuell gar keinen Einfluss auf die Textobjekte hat. Daraufhin habe ich folgendes ausprobiert:
Im Schritt 1 unter Erweitert habe ich das hier vor dem </HEAD> Tag eingefügt:
<style type="text/css">
@font-face {
font-family: 'BiLe';
src: url('bile____.eot');
src: url('bile____.eot?#iefix') format('embedded-opentype'),
url('bile____.woff') format('woff'),
url('bile____.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Bi';
src: url('biwi____.eot');
src: url('biwi____.eot?#iefix') format('embedded-opentype'),
url('biwi____.woff') format('woff'),
url('biwi____.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
Die Schriftdateien habe ich dann natürlich auch in das Verzeichnis kopiert, in dem die index.html und co. liegen.
Anschließend habe ich im Schritt 2 bei den Eigenschaften der Hompage unter Erweitert vor dem </HEAD> Tag angegeben:
<style type="text/css">
p { font-family: 'BiLe'; }
</style>
Ich habe sogar zusätzlich noch die Dateien per HTML und Widgets - Modul angehängt,aber alles ohne Erfolg.
Kann mir jemand weiterhelfen? Ich würde mich sehr über eine Antwort freuen!
Lieben Gruß,
Ruben
Darf geraten werden?
Ein Link ist Pflicht!
wenn die css Datei im files Ordner liegt und dein CSS Code keine Ordnerangabe macht wird auch die Schriftart im files Ordner gesucht!
Was soll die Angabe?
<style type="text/css">
p { font-family: 'BiLe'; }
</style>
es sollen alle p tags diese Schriftart haben....
Du benutzt das Textobjekt also wähle DORT auch die Schriftart aus die jeweils angezeigt werden soll!
Author
Vielen Dank schonmal für die schnelle Antwort!
Ich habe die Website im Offline-Modus getestet, deswegen fehlte der Link. Ich habe in der CSS-Datei bewusst keine Ordnerangabe gemacht, denn die Schriftart lag ja im Ordner "files"...
Im Textobjekt habe ich die jeweilige Schrift selbstverständlich ausgewählt, im IE wird die Seite auch korrekt angezeigt, aber weil sie auf die lokal installierte Schriftart zurückgreift. Firefox ersetzt die Schriftart, nur so habe ich bemerkt, dass meine @font-face Methode fehlgeschlagen ist.
Bei den p tags bin ich mir selber unsicher, es war nur eine Möglichkeit die im Forum hier: http://answers.websitex5.com/post/67591 diskutiert wurde...
Wenn ich im Textobjekt die Schrift ausgewählt habe und wie oben nach Variante 1 vorgehe (CSS-Datei mit Schriftarten im Ordner "files", Verlinkung zu dieser über Erweitert im Schritt 1), dann sollte es aber funktionieren oder?
Ruben
Du hast geschrieben
Die Schriftdateien habe ich dann natürlich auch in das Verzeichnis kopiert, in dem die index.html und co. liegen.
Ob es funktioniert siehst du online! Deswegen einen Link bereitstellen dann kann man schauen was eventuell nicht geht und wo der Fehler liegt....alles andere ist und bleibt Rätsel raten.
Author
Entschuldige, da habe ich mich falsch ausgedrückt. Bei dem 2. Versuch habe ich die Schriftdateien in das Verzeichnis kopiert, in dem auch die index.htl liegt, weil beim der zweiten Variante der CSS Code über dem Head Tag stand und nicht im Verzeichnis abgelegt war.
Hier ein Link zu dem Projekt: http://bingenheim.rubenanders.de/
Guten Tag,
Bei Firefox ist die Font-Face Funktion immer noch experimental und deshalb kann es nicht korrekt angezeigt werden da Firefox bestimmte Regeln hat die beachtet werden müssen damit es funktioniert:
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Vielen Dank!
Author
Vielen Dank, sehr hilfreich! Ich werde mal versuchen, die Syntax anzupassen. Wenn das Problem gelöst ist, melde ich mich zurück!
HI !
Du hast die "font-faces" CSS 2 x eingebunden und zwar im Ordner "FILES". Wo hast du die Fonts drinnen? Die verweisen entweder in den Root oder in den Files Ordner !
du musst auch darauf Achten daß die Bezeichnung des Fonts genau so drinnen steht in der CSS (Groß- u. Kleinbuchstaben, Leerzeichen und Sonderzeichen beachten)
Author
Hallo Andreas,
vielen Dank für deinen Hinweis! Die CSS war in der Tat zweimal eingebunden, der Code unter Erweitert im Schritt 1 war unnötig, da das Programm den Code automatisch einfügt, wenn man die CSS-Datei über das Modul HTML und Widgets anhängt... ich habe den Code jetzt entfernt. Die Fonts sind im Ordner files bei der CSS abgelegt, aber da die CSS-Datei in diesem Ordner liegt ist das doch von da aus gesehen der Root-Ordner, oder? Auch die Fonts habe ich jetzt vorsichtshalber umbenannt (ohne Sonderzeichen), aber das stimmte soweit.
Es muss aber schon an sich alles in Ordnung gewesen sein, es funktioniert über Chrome und Internet Explorer von anderen PC's aus, die Fonts werden korrekt angezeigt. Nur Firefox streikt, da hilft auch nicht der erweiterte Code...
habe ich damit die bestimmten Regeln beachtet, Claudio?
Mein Code sieht jetzt so aus, Firefox weigert sich nach wie vor:
@font-face {
font-family: 'BiLe';
src: url('bile.eot');
src: url('bile.eot?#iefix') format('embedded-opentype'),
url('bile.woff') format('woff'),
url('bile.ttf') format('truetype');
unicode-range: <urange>#;
font-variant: normal;
font-feature-settings: normal|<feature-tag-value>#;
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
(andere Schriftart genauso)
Vielen Dank! Ich werde sonst mal im Developer Centrum von Firefox nachfragen.
Ruben
Versuche mal das...
@font-face {
font-family:'BiLe';
src: url('../files/bile.eot');
src: url('../files/bile.eot?#iefix') format('embedded-opentype'),
url('../files/bile.woff') format('woff'),
url('../files/bile.ttf') format('truetype');
unicode-range: <urange>#;
font-variant: normal;
font-feature-settings: normal|<feature-tag-value>#;
font-stretch: normal;
font-weight: normal;
font-style: normal;
}
Author
Hallo Andreas,
habe ich ausprobiert, leider ohne Erfolg... Der Pfad wird schon stimmen, andere Browser (Chrome, Internet Explorer) zeigen die Schriftart ja korrekt an, nur eben Firefox nicht... Auf dieser Website hier:
http://www.elmastudio.de/typografie/schriften-mit-font-face-einbetten-so-funktionierts/
hatte eine Benutzerin das gleiche Problem und schreibt in den Kommentaren:
"...hab den Fehler gefunden, mußte in der CSS bei font-family sowohl meinen Font als auch eine Alternativschrift plus die Angabe “sans-serif” hinzufügen. Für die anderen Browser hat die Angabe meines Fonts/Alternativfonts gereicht."
Die Erweiterung meines Codes mit dem Fettgedruckten:
@font-face {
font-family: 'BiLe', 'open sans', sans-serif;
src: url('bile.eot');
src: url('bile.eot?#iefix') format('embedded-opentype'),
url('bile.woff') format('woff'), ...... usw.
zeigt allerdings keine Änderung...
Es gibt aber noch mehr User, die dort im Forum schreiben, dass Firefox Probleme macht, dass beruhigt mich.
Ich suche weiter nach der Lösung, vielen Dank schonmal für eure Hilfe!
LG Ruben
Author
Also,
es scheint als liegt die Ursache nicht bei der Codierung. Alles rumprobieren half nichts - ein Test der Dateien hat schließlich gezeigt, dass die Konvertierung der Fonts schiefgelaufen ist
. Da dieses ein anderes Problem ist, ist dieser Post hier "gelöst", was die Konvertierung betrifft erkundige ich mich dann in den entsprechenden Foren.
Mit freundlichem Gruß,
Ruben