Ich möchte Amatic SC für die Überschriften nutzen.
Welche Überschriften meinst du?
Bei Typography als Heading
Ich ergänze mal noch den CSS-Code, den ich in meine style.css hochgeladen hab:
/* amatic-sc-regular - latin */
@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: url('../fonts/amatic-sc-v22-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/amatic-sc-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/amatic-sc-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/amatic-sc-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/amatic-sc-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/amatic-sc-v22-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
Einen Screenshot von meinem Filezilla mit Child-Theme Ordner hab ich hier:
Stimmt das soweit mit den Angaben im CSS?
url(‚../ ist falsch
url(‚./ wäre richtiger 🙂
Zumindest wenn die font Dateien im Ordner fonts in deinem child theme liegen 🙂
Danke, @michi91. Aber das ändert leider immer noch nix, wenn ich immer nur einen Punkt setze…
-
Diese Antwort wurde geändert vor 8 Monaten von
sperlstyle.
deine fonts befinden sich im Unterordner der css.
Also:
src: url('/fonts/amatic-sc-v22-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('/fonts/amatic-sc-v22-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/amatic-sc-v22-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/amatic-sc-v22-latin-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/amatic-sc-v22-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/amatic-sc-v22-latin-regular.svg#AmaticSC') format('svg'); /* Legacy iOS */
}
@espiat Danke, das hab ich jetzt auch gleich ausprobiert, aber es geht immer noch nicht.
Kann es sein, dass irgendwas die Darstellung der Google Fonts blockiert?
Oder warum wird die Schriftart nicht im Frontend angezeigt, wenn ich sie ganz einfach über den Customizer auswähle? In der Vorschau wird es richtig dargestellt, aber auf keinem der Endgeräte, die ich ausprobiere…
Hallo,
auf deiner Seite gibt es einige Fehler (404) im Zusammenhang mit den Schriften, die du siehst, wenn du in die developer console schaust (bei Chrome mit der Taste F12).
Schau mal bitte in den folgenden Beitrag, da wird das Thema ausführlich behandelt.
Viele Grüße
Hans-Gerd
Mir fällt gerade auf, dass der local Parameter keinen Wert besitzt.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src
Hallo zusammen,
relativer Pfad ohne Slash /
ist die richtige Variante.
Nicht /fonts/amatic
sondern fonts/amatic
Mit Slash wird vom Chrome-Browser sogar noch akzeptiert und er zeigt die Schrift dennoch an, aber in Mozilla und IE (ja alt, ich weiß) ist die Schriftfamilie nicht korrekt verlinkt.
Komplett verkehrt ist ../fonts/amatic
Siehe:
https://webdesign-welt.de/demo/index.html
https://webdesign-welt.de/demo/mitslash.html
@michi91
Wie kommst du auf nur einen Punkt bzw. Komma + Punkt?
@sperlstyle
Das direkt von Google einbinden, so wie du es momentan (als Lösung?) gemacht hast, ist übrigens eine denkbar schlechte Idee.
Da solltest du lieber die Lösung aus meinem vorherigen Post einsetzen.
Was für ein Krimi! Ich bin ja bloß froh, dass ich so was nicht hauptberuflich mach, so wie mein Blutdruck hier in die Höhe schießt und mir im nächsten Moment das Herz wieder in die Hose rutscht.
Ich danke euch allen ganz herzlich für eure Tipps und eure Hilfe!!!
Ich glaub, jetzt hab ichs geschafft.
Zuerst konnte ich gar nix mit den Fehlercodes von @hage anfangen, aber am Ende haben sie mir gezeigt, wo ich meine Dateien hinspeichern muss. In dem von dir verlinkten Artikel war es richtig beschrieben, dankeschön dafür!
@espiat Das war wohl tatsächlich das Problem, dass die Dateien in einem anderen Ordner lagen als im Code angegeben..
@la-geek In meinem CSS ist jetzt trotzdem '../fonts/amatic. Ich hoffe, das ist einfach nur eine etwas unprofessionellere Lösung als die mit relativem Pfad ohne Slash und nicht relevant für die datenschutzrechtliche Seite?!
Irgendwie würds bestimmt noch ,,sauberer“ gehen, aber hauptsache es funktioniert jetzt so. Bei mir ist der Ordner mit den Font-Dateien jetzt noch auf verschiedenen Ebenen: einmal im WordPress-Grundordner sozusagen, einmal im Ordner, wo die Theme-Ordner liegen und einmal im Ordner des Child-Themes. Wenn ich sie an einer Stelle rauslösche, geht es wieder irgendwo nicht. Lustig, das ganze für jemand ,,Außenstehenden“ wie mich 😉
Ich mach mir jetzt ein Bier auf und trink auf euch, dank eurer Hilfe kann ich heute Nacht wieder ruhig schlafen. Tausend Dank nochmal!
relevant für die datenschutzrechtliche Seite?!
Nein, du hast immer noch die Fonts von Google verlinkt:
<link rel=“preconnect“ consent-by=“cookies“ consent-id=“592″ href=“//fonts.googleapis.com“ consent-transaction-complete=“1″>
<link rel=“preconnect“ consent-original-href-_=“//fonts.googleapis.com“ consent-required=“591″ consent-by=“cookies“ consent-id=“592″><link rel=“preconnect“ crossorigin consent-original-href-_=“https://fonts.gstatic.com“ consent-required=“591″ consent-by=“cookies“ consent-id=“592″>
<link rel=“preconnect“ crossorigin=““ consent-by=“cookies“ consent-id=“592″ href=“https://fonts.gstatic.com“ consent-transaction-complete=“1″>
<link rel=“stylesheet“ id=“botiga-google-fonts-css“ media=“all“ consent-original-href-_=“//fonts.googleapis.com/css?family=System+default%3Aregular%7CAmatic+SC%3Aregular&subset=latin&display=swap&ver=1.1.0″ consent-required=“591″ consent-by=“cookies“ consent-id=“592″/>
Lies dazu mal das Urteil, das ich bereits oben verlinkt hatte:
https://rewis.io/urteile/urteil/lhm-20-01-2022-3-o-1749320/
In meinem CSS ist jetzt trotzdem ../fonts/amatic.
Deswegen klappt es nicht, sondern weil die Schrift von der Google-Website übertragen wird.
@la-geek Das ist ja doof, ich hab mich schon so gefreut.
Ja, die Urteile hab ich mir scho angeschaut. Ziemlich beängstigend. Deswegen möchte ichs ja auch richtig machen.
Wo kann ich das denn kontrollieren, ob ich die Google-Webfonts verlinkt hab oder ,,meine“ hochgeladenen?
