Moin, liebe Forumskollegen,
ein Kunde von mir wünscht eine ganz bestimmte serifenlose Schrift für seinen Webauftritt in insgesamt drei Gewichtungen (200, 400 und 700).
Diese soll möglichst browserunabhängig auf den abrufenden Geräten zu sehen sein. Meine Versuche führten mich bislang nicht weiter.
Wie kann ich die verwendeten Schriften auf die drei genannten sowie einen Sonderfont beschränken, um diesen Wünschen nachzukommen?
Für Ideen wäre ich sehr dankbar.
Es grüße
Euer Jürgen
Der folgernde Artikel erklärt das grundsätzliche Vorgehen: https://docs.zeta-producer.com/webfonts-selbst-hosten.html#a7157
Wenn das nicht hilft, sollten Sie uns verraten, wier genau Ihre bisherigen Versuche aussahen und wie die URs zu den Schriftarten lauten…
Hallo Stefan S.,
das habe ich genauso gemacht wie von Ihnen vorgegeben. Auch der Pfad dorthin /content/media/files/webfonts/*.woff2 sollte so richtig sein. Nur die Anzeige bleibt halt überall unverändert, kein Anzeichen von leichter Inter bzw. Inter200. Ich hatte für die kontrastreichere Darstellung auf die Gewichtungen 200, 500 und 800 umgestellt.
Eine Installation der normalen ttf-Dateien auf dem System sollte ja durch die feststehende Schriftart nicht mehr nötig sein, oder? Wir wollen ja systemunabhängig bleiben, soweit irgend möglich.
Viele Grüße
Jürgen
Wo kann man das denn online ansehen um das genauer zu analysieren?
Hallo Stefan S.,
das finden Sie unter siebenstern-druck.de/chaconne.
Das Verrückte dabei ist, dass in der oberen Menüleiste die Schrift richtig ist (Gewicht 200), auf dem Header-Bild aber nur regular und 700 anzeigt, obwohl die gar nicht installiert sind, sondern bei der fetten Variante die 800.
Auch die untere Menüleiste lässt sich nicht von meinen Wünschen beeindrucken . . .
Viele Grüße
Jürgen
Meiner Meinung nach ist die Ursache, dass Sie zwar die Schriften laden, aber nirgends eine CSS-Regel zur Definition der jeweiligen font-weight nutzen.
In der "oberen Menüleiste" wird vom Layout aus schon "font-weight: lighter" definiert und das passt dann wohl eher zufällig auf Ihre Erwartungen.
Sollen bestimmte Elemente feste Schriftstärken haben, dann müssen Sie das auch so definieren, z.B.:
Das funktioniert an der Stelle mit dem Header prima, vielen Dank dafür schon einmal. Ich muss dann also nur suchen, wie die anderen Felder benannt sind, um genau diese Bezeichnungen mit der Schriftstärke ebenfalls in das CSS einzufügen, also z. b. beim Extramenü?
Viele Grüße
Jürgen
Ja, da müssten Sie sich über die sogenannten CSS Selektoren schlau machen.
Hallo Stefan S.,
das habe ich jetzt mal so gemacht. Die Selektor-ID lautet xmenu, woraus sich nach meiner Meinung dies hier für leichte Schrift ergibt:
Eingebaut unter Einstellungen/CSS:
<style>
#xmenu {
font-family: 'inter';
font-style: normal;
font-weight: 200;
}
</style>
Zeigt nur leider gar keine Wirkung.
Wenn ich allerdings font-family: 'oswald' eingebe, verändert sich die Schrift auch zu Oswald. Damit bin ich vollends verwirrt, denn alle Schriften sind im Ordner drin.
Viele Grüße
Jürgen
"Inter" muss in ihrem Fall mit großem "i" geschrieben werden. Zudem gibt es für links schon eine regel für die Schriftstärke, die eine höhere Priorität hat. Also müsste es wohl eher in diese Richtung gehen:
PS: was mir unklar ist, warum Sie den Font nicht ganz normal über die Schriftartenauswahl einbinden? Inter ist ja als Google-Font verfügbar.
Boah, super, bin begeistert! So funktioniert das!
Da war ich also schon auf dem richtigen Weg, nur in der falschen Ebene. Vielen Dank dafür.
Die Fonts habe ich über den Layout-Designer so eingebunden wie beschrieben, allerdings beschränkt auf "Inter", und sie dann lokal gespeichert. Es geht ja darum, dass browserunabhängig bestimmte Fonts auftauchen sollen, weshalb ich das sehr restriktiv gehandhabt hatte.
Was mit unklar ist, woher Sie die xmenu-Bezeichnung a:not(.button) haben. Ich hatte zwar gelesen, dass man sich den Selektor aus dem Browser über "Untersuchen/Kopieren/selector kopieren" von der entsprechenden Stelle kopieren kann, da kam aber als Kopie immer nur #xmenu und nicht mehr. Seit meinen HTML-Zeiten und den frühen CSS-Ansätzen hat sich doch so einiges verändert, stelle ich fest.
Aber erst einmal ganz herzlichen Dank! Echt toller Support! Auf dieser Basis kann ich das "Suchen"-Feld auch noch umbauen.
Viele Grüße
Jürgen
Seit Version 16.6 werden im Layoutdesigner ausgewählte Webfonts automatisch lokal gespeichert.
Hallo Stefan S.,
stimmt natürlich. Aber ist auch ein Fallback auf andere Schriften ausgeschlossen? Ich habe nämlich seinerzeit alles Sites auf Fonts in eigenen Ordnern umgestellt.
Viele Grüße und noch einmal herzlichen Dank für den tollen Support.
Jürgen
Die Schrift-Dateien werden lokal geladen und auf den Webserver kopiert, sind also vorhanden. Warum sollte dann also ein Fallback stattfinden?
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
Wenn Sie neu bei uns sind, hilft Ihnen unsere Hilfe-Seite dabei, sich im Forum zurechtzufinden. Dort erfahren Sie alles Wichtige, von der Registrierung bis hin zur Erstellung eigener Themen (Fragen).
Ohne Programmierkenntnisse gleich mit Zeta Producer loslegen. Layout auswählen, Text eingeben – fertig. Kostenloser Support und über 99% zufriedene Kunden. Überzeugen Sie sich selbst!
