nicht angemeldet
Schrift mit @font-face einbinden: Wo ist der Fehler?
Gunnar Bittersmann
Auge
Matthias Apsel
TSIch möchte Schriftarten mittels @font-face in meine Webseiten einbinden. Leider will die Einbindung einfach nicht klappen, trotz mehrfacher Kontrolle. Wer kann mir Hilfestellung geben? Fehler im Quelltext? Übersehe ich etwas anderes?
CSS-Quelltext:
body {
background-color: #FFFFFF;
font-family: arial, helvetica, verdana, trebuchet, sans-serif;
font-size: 12px;
line-height: 17px;
text-align:justify;
color: #3C3C3C;
}
@font-face {
font-family: 'arizona';
src: url('fonts/arizona.ttf') format('truetype');
font-family: 'lmroman';
src: url('fonts/lmroman10-regular.otf') format('opentype');
}
h1 {
font-family: arizona, lmroman, Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
text-align: center;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #800000;
}
HTML-Quelltext:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-language" content="de">
<link rel="stylesheet" type="text/css" href="design5.css">
<title>test6</title>
</head>
<body>
<h1>Hier erscheint die mit font-face gestaltete Überschrift</h1>
</body>
</html>
Die mit @font-face zugänglich gemachten Schriftarten werden aber nicht eingebunden. Wo liegt der Fehler? Bin für entsprechende Hinweise und Tipps sehr dankbar.
Grundsätzliches:
- Die einzubindenden Schriftartdateien liegen direkt auf dem Webserver in einem Ordner "fonts", der ein Unterordner des html-verzeichnisses ist.
- Einzubindende Schriften stammen von fontsquirrel.com
- Schriftart 1: arizona.ttf (Truetype)
- Schriftart 2: lmroman10-regular.otf (Opentype)
Grundlage die Einbindung entstammt dem folgenden SELFHTML-Artikel:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face
-
@@Sanddorn22
Fehler im Quelltext?
Ja, du brauchst für jede Schriftart eine eigene
@font-face-Regel.Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet).
Übersehe ich etwas anderes?
Auch das.
font-size: 12px;
12px ist viel zu klein, um gut gelesen werden zu können.
line-height: 17px;
Gib die Zeilenhöhe immer im Verhältnis zur Schriftgröße an, niemals in px. Ansonsten laufen die Zeilen ineinander, wenn der Nutzer die Schrift vergrößert. (Was er bei 12px unweigerlich tun muss.)
text-align:justify;
Blocksatz ist fürs Web ungeeignet. Die unterschiedlich breiten Leerräume machen den Text schlecht lesbar.
<html><!DOCTYPE html>-Angabe fehlt. Ansonsten schalten Browser in den Quirkmodus. 💩Im
<html>-Tag ist die Sprache des Seiteninhalts anzugeben, wichtig für Screenreader, Silbentrennung, Rechtschreibprüfung u.a. Für deutsch:<html lang="de"><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">Das kannst du kürzer haben:
<meta charset="iso-8859-1">Als Zeichencodierung solltest du aber besser UTF-8 verwenden.
<meta http-equiv="content-style-type" content="text/css">Kann weg.
<meta http-equiv="content-language" content="de">Kann weg. Angabe der Sprache wie oben gesagt.
<h1>Hier erscheint die mit font-face gestaltete Überschrift</h1>Es gibt keinen Grund, Umlaute zu verstümmeln.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
Vielen Dank Gunnar, für Deinen hilfreichen Tipp zur @font-face Regel und den weiteren Anmerkungen.
Schriftarteinbindung klappt nun hervorragend !
Fragen beziehen sich auf eine Webseite, die noch nach "HTML 4.01 Transistional" referenziert ist. Doctype ist in den Originaldateien angegeben. ;-) Die eine oder andere Frage bleibt aber noch.
Außerdem sollten Webfonts als WOFF und WOFF2 (besser komprimiert) vorliegen. Wandle die Schriften in diese Formate um (sofern die Lizenz das nicht verbietet).
- Mit welchen (freien) Programmen lassen sich Webfonts-Formate denn gut konvertieren? Ich arbeite unter Windows.
- Bezüglich der Umwandlung muss ich mich mit den Lizenzen nochmal beschäftigen. Zur Einbindung im vorliegenden Format sind sie jedenfalls freigegeben. Zur Lizenzfrage hätte ich auch noch eine andere Frage an Dich, vielleicht schaust Du später (Sonntag/Montag) nochmal hier vorbei.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">Das kannst du kürzer haben:
<meta charset="iso-8859-1">Gilt das auch für HTML 4.01 gleichermaßen? Etwa....
<meta charset=utf-8"><meta http-equiv="content-style-type" content="text/css">Konnte zum Zeitpunkt der Seitenerstellung (2009/2010) nicht weg. Dann meckerte der W3C-Validator: „Beim Verwenden von style-Attributen muss die verwendete Stylesprache in einen Meta-Element (<meta http-equiv="Content-Style-Type" content="text/css">) mitgeteilt werden.“
-
Hallo
- Mit welchen (freien) Programmen lassen sich Webfonts-Formate denn gut konvertieren? Ich arbeite unter Windows.
Windows-Programme, die Fonts konvertieren können, kenne ich keine. Da ich eh nur selten Fonts konvertiere, benutze ich dafür Online-Dienste. So hat z.B. der auch von dir erwähnte Dienst fontsquirrel.com einen Webfont-Generator, mit dem du Fonts in passende Dateiformate umkonvertieren kannst. Bei Fonts, die auf fontsquirrel.com selbst angeboten werden, schränkt der Generator auch bestimmte Features entsprechend der Lizenzbedingungen der Fonts automatisch ein.
Das kannst du kürzer haben:
<meta charset="iso-8859-1">Gilt das auch für HTML 4.01 gleichermaßen? Etwa....
<meta charset=utf-8">Nein. Dazu muss das Dokument als HTML5 deklariert sein und auch so vorliegen. Mit dateiübergreifendem Suchen und Ersetzen sollte es meiner Meinung nach kein Problem sein, sowohl die Doctype-Angaben als auch die von Gunnar aufgezählten Veränderungen vorzunehmen. Mit Templates sollte dies erst recht kein Problem sein.
Der Inhalt muss dazu im ersten Schritt noch nicht angefasst werden, weil es die HTML4-Elemente auch in HTML5 gibt (wenn auch einige mit abweichender Bedeutung). Die Betonung liegt aber nicht umsonst auf „im ersten Schritt“. Jeder von uns weiß, dass es oft vorkommt, dass andere Aufgaben wichtiger werden und schlussendlich halb fertige Sachen liegen bleiben. HTML5 bietet aber reichlich Potential, seine Seiten sowohl HTML-seitig semantisch sinnvoller auszuzeichnen, als es mit HTML4 oder XHTML1 möglich ist, als auch Browserfeatures zu nutzen, die mit den alten HTML-Ausgaben nicht ansprechbar sind. Der Umstieg lohnt sich, auch wenn er eine recht weitgehenden Umbau ermöglicht.
Tschö, Auge
--
Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
Toller Dampf voraus von Terry Pratchett
-
-
Hallo Sanddorn22,
Zusätzlich, zu dem was Gunnar sagte:
<link rel="stylesheet" type="text/css" href="design5.css">text/cssist in HTML5 der Standardtyp, kann also weg.Bis demnächst
Matthias-
@@Matthias Apsel
Hallo Sanddorn22,
Zusätzlich, zu dem was Gunnar sagte:
<link rel="stylesheet" type="text/css" href="design5.css">text/cssist in HTML5 der Standardtyp, kann also weg.Hätte auch vorher schon weg gekonnt, da ja
<meta http-equiv="content-style-type" content="text/css">angegeben war. ;-)LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
Hallo und guten Morgen,
Ich möchte Schriftarten mittels @font-face in meine Webseiten einbinden.
@font-face { font-family: 'arizona'; src: url('/fonts/arizona.ttf') format('truetype'); font-family: 'lmroman'; src: url('/fonts/lmroman10-regular.otf') format('opentype'); }Probier mal, den Pfad absolut zur Domain anzugeben (wie oben) und die Fonts dann auch dort zu parken. Grundsätzlich funktionieren die Webfonts mEn nur, wenn sie von derselben Domain geholt werden, wie die Seite, in der sie benutzt werden.
Grüße
TS-
@@TS
Grundsätzlich funktionieren die Webfonts mEn nur, wenn sie von derselben Domain geholt werden, wie die Seite, in der sie benutzt werden.
Eben von dort hat Sanddorn22 die Fonts auch geholt. Den Fehler hast du übersehen und wiederholt.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo und guten Morgen,
Grundsätzlich funktionieren die Webfonts mEn nur, wenn sie von derselben Domain geholt werden, wie die Seite, in der sie benutzt werden.
Eben von dort hat Sanddorn22 die Fonts auch geholt. Den Fehler hast du übersehen und wiederholt.
Sorry, ich verstehe dich nicht! Soll ich Dir jetzt auch Minuspunkte geben?
Welchen Fehler habe ich wiederholt? Wie macht man es richtig? Bitte die Antwort auf das Holen von Webfonts beschränken, bzw. mindestens beantworten. Mehr Wissen ist immer gut, aber die Nebenschauplätze interessieren mich nur, wenn die Hauptfrage geklärt werden konnte.
Grüße
TS-
@@TS
Sorry, ich verstehe dich nicht! Soll ich Dir jetzt auch Minuspunkte geben?
Wieso willst du mir Minuspunkte geben, wenn es dir am Verständnis mangelt?
Welchen Fehler habe ich wiederholt? Wie macht man es richtig? Bitte die Antwort auf das Holen von Webfonts beschränken, bzw. mindestens beantworten. Mehr Wissen ist immer gut, aber die Nebenschauplätze interessieren mich nur, wenn die Hauptfrage geklärt werden konnte.
Die dürfte wohl geklärt sein. Seit dem ersten Satz in der ersten Antwort hier im Thread.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
@@Gunnar Bittersmann
Mehr Wissen ist immer gut, aber die Nebenschauplätze interessieren mich nur, wenn die Hauptfrage geklärt werden konnte.
Die dürfte wohl geklärt sein.
Moment mal, was heißt übrigens Hauptfrage?
Dass die Schrift in einer lesbaren Schriftgröße angezeigt wird, ist wichtiger als welche Schriftart angezeigt wird.[1] Der Hinweis, die Größe nicht auf 12px zu setzen war wichtiger als der zur Syntax der
@font-face-Regel.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
wenn’s nicht eine besonders schlecht lesbare oder gar Iconfont o.ä. ist ↩︎
-
Hallo und guten Morgen,
Sorry, ich verstehe dich nicht! Soll ich Dir jetzt auch Minuspunkte geben?
Wieso willst du mir Minuspunkte geben, wenn es dir am Verständnis mangelt?
Welchen Fehler habe ich wiederholt? Wie macht man es richtig? Bitte die Antwort auf das Holen von Webfonts beschränken, bzw. mindestens beantworten. Mehr Wissen ist immer gut, aber die Nebenschauplätze interessieren mich nur, wenn die Hauptfrage geklärt werden konnte.
Die dürfte wohl geklärt sein. Seit dem ersten Satz in der ersten Antwort hier im Thread.
Oh. Ich bitte den OP um Entschuldigung. Mir hat es an der nötigen Aufmerksamkeit gemangelt.
Mir ging es um die Same-Origin-Policy und dabei habe ich die Eigenschaftenbindung für die Fonts-Angaben übesehen.
@Gunnar Bittersmann:
Dir mangelt es seit einiger Zeit am hinreichenden Respekt, ganz zu schweigen vom ausgezeichneten! Ich kann zwar auch gelegentlich Entgleisungen (um das mal so flapsig auszudrücken), deine sind mir aber inzwischen zu häufig. Warum nur? Du bist einer der qualifiziertesten Poster hier und behandelst immer öfter andere, als wären sie vollverblödet.Ein bisschen mehr Liebe bitte ;-)
Grüße
TS-
Hallo TS,
Mir ging es um die Same-Origin-Policy
Die war aber gegeben.
Bis demnächst
Matthias-
Hallo und guten Morgen,
Mir ging es um die Same-Origin-Policy
Die war aber gegeben.
aber der Pfad innerhalb der Same-Origin-Policy war fraglich. mensch, mensch, mensch
Dass wir uns hier alle bemühen, unser Wissen zusammenzuführen, setze ich immer noch voraus! Diskreditierung ist da der falsche Weg!
Grüße
TS-
Hallo TS,
aber der Pfad innerhalb der Same-Origin-Policy war fraglich. mensch, mensch, mensch
naja. Zitat aus dem OP:
Die einzubindenden Schriftartdateien liegen direkt auf dem Webserver in einem Ordner "fonts", der ein Unterordner des html-verzeichnisses ist.
Ergänzung von mir: Desjenigen Verzeichnisses, in dem die aktuelle HTML-Ressource liegt. Damit sollte die Pfadangabe richtig sein, obwohl man ja immer darüber stolpern kann, ob relative Pfadangaben sich auf die CSS- oder die HTML-Ressource beziehen.
Und da die SOP imo nur nach Protokoll und Host schaut, sollte die erfüllt sein.
Dass wir uns hier alle bemühen, unser Wissen zusammenzuführen, setze ich immer noch voraus! Diskreditierung ist da der falsche Weg!
Unbestritten, denn als Diskreditierung bezeichnet man das gezielte Untergraben des in eine Person oder Sache gesetzten Vertrauens in der Öffentlichkeit. Oftmals wird zum Erreichen der persönlichen Ziele das Mittel der Lüge benutzt. (Wikipedia)
Bis demnächst
Matthias
-
-
-
@@TS
Dir mangelt es seit einiger Zeit am hinreichenden Respekt, ganz zu schweigen vom ausgezeichneten! Ich kann zwar auch gelegentlich Entgleisungen (um das mal so flapsig auszudrücken), deine sind mir aber inzwischen zu häufig.
Das mag sein. Mir ist aber unklar, wo du in diesem Thread eine Entgleisung meinerseits siehst. Weil ich ein Posting, das fachlich gleich zweimal daneben lag, dementsprechend bewertet habe? Weil ich der blöden Frage „Soll ich Dir jetzt auch Minuspunkte geben?“ die Antwort verpasst habe, die sie verdient hat?
Postings von anderen grundlos negativ zu bewerten zeugt auch nicht gerade von Respekt. Aber diesmal hast du wenigstens nur gefragt, ob du das tun solltest.
Von Respekt würde es zeugen, Postings auch mal positiv zu bewerten, die nicht nur die gestellte Frage beantworten, sondern sich die Mühe machen, auch viele ungestellte Fragen zu beantworten. Aber das ist hier im Forum nicht gerade usus. Diese Respektlosigkeit kann man bemängeln, ja.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo und guten Tag,
Ich beantrage einen eigenen Psychiologen für das Forum.
Ich komme da sonst nicht mehr mit.
Grüße
TS
-
-
An dieser Stelle zunächst ein DANKESCHÖN an alle für die Hilfestellung.
Mir ging es um die Same-Origin-Policy
Die war aber gegeben.
aber der Pfad innerhalb der Same-Origin-Policy war fraglich. mensch, mensch, mensch
Ich meine, in der Diskussion liegt lediglich ein Missverständnis bezüglich dieser SOP vor.
Ich habe mich bei der Umsetzung strikt am SELFHTML-Artikel zur Schriftarteneinbindung orientiert. Und dort heißt es: „Um die Beschränkungen der same-origin-policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften >>auf der eigenen Domain mit relativen Pfadangaben referenzieren<<.“
Die Beschreibung der same-origin-policy im Self-HTML-Glossar finde ich aber etwas missverständlich. Dort heißt es nämlich:
„Die Same-Origin-Policy (SOP) ist ein Sicherheitskonzept, das clientseitigen Skriptsprachen wie JavaScript, aber auch Cascading Style Sheets einschränkt auf Objekte zuzugreifen, >>die von einer anderen Webseite stammen oder deren Speicherort nicht der Origin entspricht<<.“Die Frage, die sich stellt, ist ja wohl, was hier mit >>„von einer anderen Webseite stammen“<<, bzw. >>„mit der "Origin“ genau gemeint ist<<. Gemäß den Ausführungen im vorigen Absatz, wäre die Quelle nach meinem Verständnis die URL, von der z.B. die Schriftartdateien (tatsächlich) stammen. Also im obigen Fall fontsquirrel.com .
In der Praxis ist mit der "Origin" aber wohl die Webseite gemeint, auf der (in diesem Fall) die Schriften zur Anwendung kommen sollen, also die URL des jeweiligen Webprojektes. So ergibt es sich jedenfalls aus dem SELFHTML-Arkikel, der eingangs genannt ist und von mir auch entsprechend umgesetzt wurde.
Und diese beiden Aussagen stehen m.E. im Widerspruch zueinander.-
Hallo Sanddorn22,
Die Beschreibung der same-origin-policy im Self-HTML-Glossar finde ich aber etwas missverständlich. Dort heißt es nämlich:
„Die Same-Origin-Policy (SOP) ist ein Sicherheitskonzept, das clientseitigen Skriptsprachen wie JavaScript, aber auch Cascading Style Sheets einschränkt auf Objekte zuzugreifen, >>die von einer anderen Webseite stammen oder deren Speicherort nicht der Origin entspricht<<.“Ja, ich habe es ein wenig besser formuliert.
Die Frage, die sich stellt, ist ja wohl, was hier mit >>„von einer anderen Webseite stammen“<<, bzw. >>„mit der "Origin“ genau gemeint ist<<.
Mit der Origin ist Protokoll, Domain und Port gemeint.
Gemäß den Ausführungen im vorigen Absatz, wäre die Quelle nach meinem Verständnis die URL, von der z.B. die Schriftartdateien (tatsächlich) stammen. Also im obigen Fall fontsquirrel.com .
Nein.
In der Praxis ist mit der "Origin" aber wohl die Webseite gemeint, auf der (in diesem Fall) die Schriften zur Anwendung kommen sollen, also die URL des jeweiligen Webprojektes. So ergibt es sich jedenfalls aus dem SELFHTML-Arkikel, der eingangs genannt ist und von mir auch entsprechend umgesetzt wurde.
Nicht nur in der Praxis. Allerdings nicht die komplette URL, sondern nur Protokoll und Domain. Die SOP schlägt also schon dann zu, wenn ein JavaScript auf **http://**example.com ein anderes von **https://**example.com nachladen möchte.
Bis demnächst
Matthias -
Hallo und guten Abend,
Mir ging es um die Same-Origin-Policy
Die war aber gegeben.
aber der Pfad innerhalb der Same-Origin-Policy war fraglich.
Ich habe mich bei der Umsetzung strikt am SELFHTML-Artikel zur Schriftarteneinbindung orientiert. Und dort heißt es: „Um die Beschränkungen der same-origin-policy nicht unbeabsichtigt auszulösen, sollten Sie Schriften >>auf der eigenen Domain mit relativen Pfadangaben referenzieren<<.“
Da ist auf jrden Fall der Begriff "relative Pfadangaben" irreführend. Der Pfad darf sch absolut zum Basedir, also der Domain, angegeben werden. Man soll nur Scheme und Domain nicht in deb Pfad schreiben, damit der bei Umzug auch noch stimmt.
LG
TS
-
-
-
-
-
-