Kann man lokale Schriften fett machen

[whippet]

Hallo, noch ein Schriften-Thema. Ich habe jetzt die Google-Schriften lokal angebunden. Diese kann man aber nicht mehr fett stellen. Die bleiben so zu sagen regular und es gibt kein unterschied zwischen den regular und fettgemachten Schriften. Weißt da jemand zufällig Bescheid? Danke im Voraus! Beste Grüße Peter

[Tommy Herrmann]

Moin,

Du kannst ganz unterschiedliche "weights" (Schriftgewichte) einlesen und mit dem Werkzeug "B" (Bold = fett) doch jeden Bereich fett machen.

Man kann doch eine sehr zarte Schrift ebenso auf fett formatieren wie eine sehr dicke Schrift oder auch eine kursive.

Dazu markiert man mit der Maus den Textbereich, der fett dargestellt werden soll.

Dann klickt man auf das Schriftwerkzeug, wie im Screenshot zu sehen.

Dort hat man dann die Wahl zwischen:

B = Bold = Fettschrift
I = Italic = Kursivschrift
= URL = Hyperlink

Lies bitte auch mein Tutorial zum Einbinden lokaler Schriften. Dort beschreibe ich auch die ganz unterschiedlichen:

Font-Weights (Schriftgewichte)

... die man für jede einzelne Schrift (außer Schreibschriften "Script") wählen kann:

https://www.mobirise-tutorials.com/Local-Fonts/

Hier mal beispielhaft die Font-Weights der Schrift "Jost":

Mobirise verwendet meist für die 3 Titel-Schriften eine fette Schrift, wie hier im Beispiel der Schrift-Familie Jost dann "Jost-Bold.ttf"

... für den normalen Text dann meist "Jost-Regular.ttf"

... und für das Menü oft "Jost-Medium.ttf". Die größe dieser Schriften wird dann in Mobirise mittels CSS-Anweisungen eingestellt.

Das sieht dann im "Site-Style-Editor" (am blauen Pinsel) im Standard-Thema "Mobirise5" bei mir z.B. so aus:

... ich habe inzwischen sämtliche meiner Tutorial-Seiten auf lokale Schriften umgestellt, dort findest Du eigentlich überall auch fette Schriftbereiche.

[whippet]

Hallo Tommy,

ich habe alles so gemacht, aber es bleibt wie vorhin beschrieben. Die lokal angebundene Schrift kann man danach nicht mehr fett machen. Die Schrift wird zwar geringfügig fetter, aber man sieht es so gut wie gar nicht. Es scheint ein bug zu sein.

Beste Grüße Peter

[Tommy Herrmann]

Moin Peter,

nein - da kann es keinen Bug geben!

Da machst Du noch etwas nicht ganz richtig.

Wen Du eine Schrift-Type als lokale Schrift gewählt hast, die von Natur aus bereits fett ist - also ein Typ an dem "Bold" mit dran steht, dann kann es gut sein, dass man den Unterschied kaum sieht. Am Schrift-Typ "Regular" siehst Du das aber ganz klar.

Gucke doch mal auf meine Seiten wie diese Tutorial-Seite hier:

https://www.mobirise-tutorials.com/Local-Fonts/

Dort kannst Du doch ganz klar die fett markierten Wörter sehen - das geht immer und auch bei Dir.

[whippet]

Bei dir funktioniert es richtig, bei mir nicht. Und nein, ich lade da keine Schriften die von vornherein fett sind. Ich habe es mittlerweile mit zehn verschiedenen Schriften probiert, es bleibt aber wie beschrieben. Ich werde da wieder die online Schriften rein machen, die sollen mich verklagen. Beste Grüße Peter

[whippet]

Aber auch bei dir scheint es nicht zu funktionieren, denn nur deine Überschriften sind fett, weil du da eine Schrift in fett eingestellt hast. Mir geht es aber darum, dass man die Schrift mitten im Text fett machen kann, ähnlich wie hier. Und das ist eben das, was bei mir nicht funktioniert. Und ich meine, das ist ein bug. Definitiv!

Gruß Peter

[Tommy Herrmann]

Keine Ahnung was Du meinst ..

Wozu poste ich z.B. den Screenshot von meiner Seite einige Beiträge weiter oben:

viewtopic.php?p=7870#p7870

Da sieht man doch die fett gestellten Worte ebenso klar und eindeutig wie auf meiner Seite selbst.

Ich schreibe gerade vom Handy, derweil ich unterwegs bin.

[whippet]

Ich fürchte, wir drehen uns im Kreise. Ich weiß wie man eine Schrift fett machen kann, bei mir wird sie aber nicht fett und wenn dann nur so wenig, dass man da kaum Unterschied sehen kann. Später könnte ich Screenshot machen, aber dann weiss ich wieder nicht, wie ich ein screenshot hier platzieren (anbinden) kann. In dem englischen Forum geht das problemlos, hier kriege ich sowas auch nicht hin ...

[Klaus]

Ich hab nicht nachgesehen wie es MR macht aber es kann sein dass strong und em bei MR wenn es google Fonts direkt von google läd so macht dass jeweils ne extra Klasse mit "passender Schrift" verwendet wird und wenn man nur 1 lokal einbindet das als Faux gemacht wird.

Ich kenne mich damit nicht wirklich gut aus ...
https://www.smashingmagazine.com/2012/0 ... web-fonts/

... dagegen spricht eigentlich der fonts Ordner im jeweiligen Projekt VZ ... da sind die versch. style & weight drinnen.

Schreib mal genau um welchen Font es geht, ggf. mit URL zur Seite.

[whippet]

Hallo Klaus,

vielen Dank für diesen Anstoß. Ich vermute, im Prinzip dürfte es entweder das gleiche oder ähnliches Problem sein. Ich habe eine Beispielseite gebaut und die Schriften online und lokal angebunden. Im Text das Word "FETT" ist als bold markiert, der Rest ist belassen in der original Schrift "Jost". Mann sieht den Unterschied deutlich. Übrigens, es ist fast egal, welche Schrift man nimmt, es kommt immer das gleiche dabei raus.

Hier das Beispiel: http://applewine.de/page8.html#top

Danke! Beste Grüße Peter

Ergänzung: Es ist anscheinend ist das Problem nur auf einem desktop (mac pro) Monitor zu sein. Auf einem Handy (iPhone) ist alles in Ordnung.

[Klaus]

Im Firefox sieht man "fast" keinen Unterschied nur dass man bei lokal mal kurz n "Wacker" sieht wenn er die Schrift rendert.
Im Chrome ist der Unterschied deutlich ... könnte man jetzt mit den Dev. Tools noch genauer ansehen welche Schrift dann jeweils verwendet wird ... ggf. kennt sich damit jemand besser aus als ich ...

[whippet]

ja, da kommen wir dem Problem näher, nur die Lösung wird da wahrscheinlich kein einfache sein. Danke! Gruß Peter

Und noch eine Ergänzung: Bei mir scheint es nur bei dem browser Chrome zu sein. Beim Safari (was ich sonst nie benutze) ist alles in Ordnung.

[Klaus]

... und im Firefox wird es bei kleinerer "Bildschirmbreite" sogar oben kleiner und unten größer angezeigt.
(ggf. CSS Browser-Präfixe)

Am 10' Android Tablet das Gleiche ... Firefox ok, Chrome und Edge gut sichtbarer Unterschied.
... das ist eher was für "Font/Browser-Spezialisten" ... ich bin da nicht fit genug.

[Klaus]

Ich hab noch etwas gelesen, gebe aber jetzt auf ... nur noch so viel.

Der fonts Ordner der im jeweiligen Projekt VZ angelegt wird und wo alle möglichen style & weight von MR (nur beim Start von MR) reingelegt werden hat mit dem Publizieren nix zu tun (ggf. verwendet das MR bei der eigenen Darstellung bei laufendem Programm).

... und es gibt static Fonts wo nur ein style & weight drinnen ist und andere "Variable" wo alle möglichen drinnen sind wie beim Jost-VariableFont_wght (9) ... ob das von MR richtig angesteuert wird weiß ich nicht.

[Tommy Herrmann]

Moin,

also in meinen Browsern wird Deine Fettschrift auch vollkommen korrekt angezeigt.

Hier mein Screeenshot vom Firefox-Browser am Laptop bei 1600 x 900 Bildschirmauflösung:

Der Safari ist schon immer etwas speziell, der kann sehr vieles nicht, was bei anderen Browsern Standard ist, das passiert dann eben auch leider ständig am iPhone



Der Grund ist wahrscheinlich, dass Du einen variablen Font [wght] installiert hast und nicht die statischen Fonts, wie auch in meinem Tutorial beschrieben.



Dies ist Deine CSS zur Schrift: 'Jost[wght]'

... mit fehlender Angabe der Schriftstärke:

Code: Alles auswählen

@font-face {
   font-family: 'Jost[wght]';
   font-display: swap;
   src: url('Jost[wght]/font.ttf');
}

Unten ist dagegen meine CSS zur statischen Schrift: 'Jost-Regular'

... und das ist ein vollkommen anderer Schrifttyp. Ich verwende hier eine ähnliche Formatierung mit diesen drei Schriftgewichten (Font-Weights) wie Mobirise, damit ich keine komplett anderen Ergebnisse erhalte:

Code: Alles auswählen

@font-face {
   font-family: 'Jost-Bold';
   font-display: swap;
   src: url('Jost-Bold/font.ttf');
}
@font-face {
   font-family: 'Jost-Regular';
   font-display: swap;
   src: url('Jost-Regular/font.ttf');
}
@font-face {
   font-family: 'Jost-SemiBold';
   font-display: swap;
   src: url('Jost-SemiBold/font.ttf');
}

Für die Verwendung eines variablen Schrifttypes (Font-Weight) würde dann noch die Angabe der Schriftstärke notwendig, wie man das macht habe ich aber noch nicht versucht. Da müsste man dann wahrscheinlich sehr umständlich die Projekt-Datei von Mobirise umschreiben. Am Ende würden dann allerdings sämtliche möglichen Schriftstärken zur Verfügung stehen.

Ich glaube unser "stobi_de" (Frank) hatte da eine Lösung im Hersteller-Forum beschrieben, die ich aber nicht versucht hatte. Falls Frank das hier liest wäre ein neuer Beitrag als alternative Lösung dazu sehr toll.

Ich könnte mir vorstellen, dass der Safari-Browser mit der fehlenden Angabe zur Schriftstärke nicht zurecht kommt und Du daher dieses Problem hast.

Bitte installiere mal auch diese drei statischen Schriften aus dem Font-Verzeichnis "static" lokal und nicht diese eine variable Schrift (entferne diese). Ich bin fast sicher, dass das auch am Mac und seinem Safari Browser (den ich nicht habe) dann funktionieren sollte.

Der Safari-Browser lässt sich aus Sicherheitsgründen schon lange nicht mehr am Windows installieren, da Safari keine Updates mehr bezüglich der Kompatibilität zu Windows liefert.

Folge also genau meinem Tutorial, deswegen habe ich das - mit großer Mühe - geschrieben:

https://www.mobirise-tutorials.com/Local-Fonts/

---

... ach ja - zu Deiner Bemerkung zum englischen Forum (das ist niederländisch) - hier im Forum hast Du viel mehr Möglichkeiten Bilder (Screeenshots) einzufügen als in dieser komischen Shoutbox vom Hersteller.

Ich habe extra, bei Gründung meines Forum, eine Rubrik "Wie funktioniert das Forum" erstellt:

viewforum.php?f=17

... dort steht unter anderem auch wie man Screenshots einfügt:

viewtopic.php?t=13

[stobi_de]

Schriften-Gedöhns in der Propjektdatei ändern: steht in der PDF.
Sieht komplizierter aus, als es ist.

LokaleFontsMitMobirise.pdf

(297.62 KiB) 46-mal heruntergeladen

[Klaus]

@stobi_de +1

... ich hatte heute selber noch einiges probiert, jetzt rein CSS ohne MR und es sieht für mich so aus als ob der Chrom das in den variablen Fonts enthaltene Bold (700er) nicht nimmt. In dem Jost sind ja 9 versch. insgesamt drinnen, gib man das im CSS extra an dann nimmt er auch das aus dem variablen Font und es sieht so aus wie es sein muss. Komisch ist halt auch dass wenn man sich den Font (TTF) anguckt gerade der Bold halt nicht als bold bezeichnet wird ... ggf. ist es auch das.
Ich bin jetzt nicht gut genug um zu behaupten dass gerade der "Primus" (Chrome) es falsch macht und der Firefox richtig, "riecht" aber danach.

[Tommy Herrmann]

Hallo Frank,

vielen Dank für das Tutorial

Ich habe es durchgelesen aber noch nicht nachgestellt.

Das ist ein wenig schwierig für "Anfänger" (denke ich) und sehr, sehr aufwändig

... ich glaube wahrscheinlich auch meistens
nicht notwendig, denn es gibt ja in den statischen Fonts (laut meinem Tutorial) eigentlich alle Font-Weights, die Mobirise auch über "Google Fonts" verwendet. So muss man dann nichts an der Projekt-Datei ändern, was immer (gerade für Anfänger) sehr fehlerträchtig ist.

[stobi_de]

Ja, es liest sich sehr sehr lang, aber ich wollte wirklich jeden Schritt erfassen.
Natürlich ist Tommys Lösung erheblich einfacher, aber .... wir sprachen genug davon

Ich habe in meinen ganzen Projekten eigentlich immer die gleichen 10-20 Schriften drin.
Die habe ich alle mal runtergeladen, habe die css erstellt und nun werden die ohne den ganzen Aufwand in die Kundenprojekte verteilt.

Wenn man es mal verstanden hat, ist es eigentlich einfacher als Tommys Lösung

(Na ja, bilde ich mir halt ein)

Frank am Abend

[Tommy Herrmann]

Moin Frank,

ich habe nach Deiner Anleitung jetzt zusätzlich zum Testen "Google Fonts" mit den gleichen lokalen Fonts ersetzt.

Vielen Dank nochmals!

... aber einfacher ist das auf keinen Fall

Hier meine Seite:

https://www.mobirise-tutorials.com/Local-Fonts-Weights/


Ich bin eine ganze Weile mit dieser Erklärung nicht klar gekommen, vielleicht solltest Du das etwas ändern, denn man kann keine Datei ohne Dateierweiterung speichern. Man muss diese dann nachträglich umbenennen. Es macht auch Sinn an dieser Stelle zu erklären warum, eben weil es in der URL so drinnen steht.

Im Ordner Roboto legen wir nun die css-Datei des Fonts an. Diese hat den Namen „css“ - ohne weitere Endung.
In diese css kopieren wir den soeben vom Webfont-Helper erzeugten Code. Wir müssen hier noch ein Suchen-Ersetzen machen: ../fonts/ ersetzen gegen nichts – also überall löschen.

Vielleicht wäre es verständlicher der CSS-Datei einen Namen wie "style.css" zu geben und dann anstelle von "css" eben "style.css" in die URL einzutragen.

Code: Alles auswählen

<link rel="preload" href="https://www.mobirise-tutorials.com/Local-Fonts-Weights/assets/myfonts/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://www.mobirise-tutorials.com/Local-Fonts-Weights/assets/myfonts/css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=swap"></noscript>

Ich habe das also bei mir mal so geändert und die CSS-Datei auch so genannt:

style.css

So ganz erschließt sich mir der Sinn dieser ganzen Aktion aber dennoch noch nicht, denn ich verwende z.B. nur 3 Font-Weights der Schrift "Jost" im Standard-Thema "Mobirise5". Genau so, wie es Mobirise ja auch tut.

Wozu muss ich dann 18 Schriften downloaden, aus 18 Schriften eine CSS-Datei erstellen und 18 Schriften auf den Server laden. Die werden doch nie angesprochen. Hast Du da noch eine Erklärung für mich?

Meiner Ansicht wurde diese URL ?Aktion doch nur so von Mobirise erstellt, damit eben immer - mit ein und dergleichen URL, sämtliche Font-Weights schon geladen werden. Das macht Sinn für die Hunderten von Mobirise-Themen, dann muss da nichts angepasst werden. Es macht aber eigentlich keinen Sinn für das individuelle Benutzer-Projekt.

Ich bin mir jetzt nicht zu 100% sicher, ob diese Projekt-Datei "project.mobirise" in keinem Fall mal von Mobirise wieder überschrieben werden würde und alle Arbeit dann wieder weg wäre. Weißt Du das?

Ich habe übrigens einen Import des so geänderten Projektes erfolgreich getestet. Da hat Mobirise alles schön so gelassen.

Ich habe mein Tutorial dazu etwas angepasst, denn zum Beispiel braucht man bei der Hilfeseite vom "Google Webfonts Helper":

https://google-webfonts-helper.herokuap ... sets=latin

... einfach unten nur den Pfad ../fonts/ löschen und schon hat man die bereits korrekte CSS: