Kann man lokale Schriften fett machen

[Tommy Herrmann]

Hallo Frank,

... ich habe eben mal mein Tutorial, zu der ursprünglichen Idee von Dir zu der Verwendung der gesamten Font-Weights einer Google-Schrift in lokale Verweise zu ändern, nun fertig geschrieben:

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

Ich habe auch Dich ("Afripix") dort erwähnt. Sollte Dir das nicht Recht sein, lasse es mich bitte wissen.

Ein wenig komisch kommt mir das immer noch vor - aber es scheint zu funktionieren

[Klaus]

Nur noch so als Tipp, das nach dem ? (URL-Parameter) wird nur benötigt wenn man die CSS von der google Font API passgenau erzeugen lässt, bei einer lokalen Datei die man per Hand mal erstellt hat sind die für nix gut.

style.css?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i"

( https://developers.google.com/fonts/doc ... ng_started )

... ach ja weil wir schon dabei sind ... Deine Seite feuert sofort einen Aufruf zu translate.google.com raus ... ganz ganz böse! ;-)

---
https://fonts.googleapis.com/css?family=Jost:400,700
Das hier läd z.B. eine CSS runter die Jost mit normaler (Regular/400) und bold (700) enthält.

[Tommy Herrmann]

Hallo Klaus,

danke für Deinen Beitrag.

Weil ich diese URL-Parameter eben nicht wirklich verstanden habe, hatte ich auch diese Variante von "stobi_de" bisher nicht verwendet. Natürlich bin ich viel zu neugierig, um einem Test zu widerstehen.

Dennoch - jetzt habe ich das ja mal versucht - und siehe da, es geht eben auch ohne den Verweis zu Google-Fonts! Es werden auch unterschiedliche Font-Weights gezeigt - wie ich meine. Man sieht zum Beispiel einen leichten Unterschied zu meiner anderen Tutorial-Seite, bei der ich andere Fonts lokal verwende im Bereich "Menü" und den "Buttons". Ich habe mir das haarklein angeguckt.

Warum geht es denn also dann, wenn das für nichts gut ist

Hast Du dafür eine Erklärung? Ich würde das gerne restlos verstehen.



... und ja, das mit "Google Translate" kann ich auch nicht wirklich beurteilen. Ich verwende "Google Translate" seit mindestens 20 Jahren auf allen meiner alten NOF-Tutorial Seiten, insbesondere weil ich unheimlich viele Besucher aus dem Ausland habe (viel mehr als aus Deutschland). Auf meinen alten NOF Seiten hatte ich immer so 1.000 am Tag. Insgesamt viel mehr als in meinem dortigen Counter angezeigt - ca. 3 Millionen.

Ich habe "Google Translate" bei meinen Seiten zu Mobirise nur sehr sparsam angewendet, weil ich eben auch nicht genau weiß was diese API macht. Woher könnte ich das auch wissen? Weiß das irgend jemand denn?

ich benötige sie aber eigentlich dringend. Denn auch meine Mobirise-Tutorials werden von sehr vielen ausländischen Besuchern genutzt und das geht nur in ihrer Sprache.

Eben nur bei wichtigen Tutorials, wozu ich auch immer wieder von meinen Besuchern aufgefordert werde, die sowieso nicht verstehen, warum ich meine Seiten nicht gleich in Englisch schreibe.

Ich denke auch eigentlich, dass die API "Google Translate" erst bei Gebrauch aktiv startet.

Ich habe alle diese APIs von Google und anderen in meinen Datenschutzerklärungen beschrieben, die jeder meiner Besucher zunächst als gelesen bestätigt und der Verwendung auch explizit zugestimmt hat. Sonst könnte er diese Seiten nicht aufrufen.

https://www.mobirise-tutorials.com/Datenschutz/

Google Translate

Bei manchen meiner Webseiten möchte ich meinen Besuchern die Möglichkeit bieten, diese in einer anderen Sprache zu nutzen. Dazu verwende ich "Google Translate", betrieben von Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA.

Aus Datenschutzgründen wird "Google Translate" in der Standardeinstellung deaktiviert, erkennbar an der Darstellung des Textes "Sprache auswählen". Erst wenn Sie den Text "Sprache auswählen" anklicken und eine andere Sprache wählen, wird "Google Translate" aktiviert und es werden Daten an Google übertragen. Neben Ihrer IP-Adresse wird auch die URL der besuchten Seite übertragen. Ich habe keinen Einfluss auf die erhobenen Daten und Datenverarbeitungsvorgänge. Mir sind auch nicht der Umfang der Datenerhebung, die Zwecke sowie die Speicherfristen bekannt.

Informationen zu Zweck und Umfang der Datenerhebung sowie ihrer Verarbeitung durch Google erhalten Sie in dem nachfolgend aufgeführten Datenschutzhinweis von Google:

https://policies.google.com/privacy?hl=de

[Klaus]

Ich schreibe heute Abend ggf. noch was dazu ("Bastlerwissen" das ich jetzt auf die Schnell erworben hab) ... aber vorab soviel, mit 2 variablen Fonts (normal/Italic) und einer CSS mit passendem Eintrag pro Font geht es auch.
(Wichtig ist das font-weight: 100 900 oder was immer im variablen Font drinnen steckt.)

Der Browser verwendet für z.B. Bold <strong> halt die Schrift die als 700er definiert ist (bei static), falls es die nicht gibt weil nur eine 400er (Regular) da ist interpoliert er so gut er kann ... und das sieht man dann auch im Chrome besonders (italic das Gleiche).
Mit einzelnen 400er und 700er Schriften muss er nix interpolieren wenn man nur Normal&Bold verwendet (dazwischen wird auch wieder interpoliert).
Kommt Italic dazu braucht man dafür noch mal für Regular&Bold 400er&700er.
Dann ggf. noch latin, latin-ext ... usw. für die Unicode-Ranges die abgedeckt werden müssen.

Hier noch Auszug aus dem Jost Paket:
"This means all the styles are contained in these files:
Jost-VariableFont_wght.ttf
Jost-Italic-VariableFont_wght.ttf"
->... und genau so ist es.

[Klaus]

>family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i
Mit dem "Befehlt" sagt Du Googlehupf pass mal auf, bau mir ne CSS mit der Schrift Jost mit den Stärken 100 (ultraleicht), 200, 300, 400 (normal), ... 700 (fett) ... 900 und das dann noch mal mit den gl. Stärken aber in Italic.

Raus purzelt aus der Schnittstelle (API) die Du damit ansprichst eine CSS die geladen wird und in der die passenden Definitionen dann drinnen sind (s.h. unten). Die Fonts werden erst dann über diese erzeugt CSS geladen (von google). Der Browser wenn dann eine Schrift darstellt hat jetzt zu einer Family jede bel. Stärke einzeln und kann die optimale beim Anzeigen verwenden, sowohl bei Normal (400) als auch bei Bold/Strong(700) und bei Italich auch.
(+ noch X dazwischen die bei MR halt Default sind.)

Hätte er so wie bei Deinen Tut nur eine z.B. Normal (400, static) ausgwählt und hätte irgendwo dann Fett (Bold/Strong) im Text dann hätte er keine extra optimierte "Version" der Schrift sondern müsste sich eine Ausdenken (interpolieren) und die sieht eben nicht so gut aus.

Die Lösung einfach eine variable Schrift auszuwählen geht auch nicht weil wenn in der CSS nicht der font-weight Bereich definiert ist (und das mach MR halt nicht) nimmt er irgenEINEN "passenden" und interpoliert bei Fett wieder für Italic hat er auch nix weil dafür ja eine 2te (Style; italic) benötigt wird und man die ja nicht angegeben hat.

Lösuing für variable Fonts wäre die CSS selber zu erstellen und die 2 Fonts dann zu verwenden die man geladen hat wie in Deinem Tut steht ... mit einer Bereichsangabe bei font-weight.

Auszug aus dem was google mit der obigen URL liefert:

Code: Alles auswählen

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v14/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v14/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v14/92zatBhPNqw73oTd4g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

/* latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/jost/v14/92zUtBhPNqw73oHt4D4h.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[Tommy Herrmann]

Moin Klaus,

auch wenn ich mir Deine Erklärungen zum dritten Mal durchlese, habe ich diese noch nicht verstanden.

Was Google genau macht ist mir ja erst einmal ganz egal. Ich will ja genau nicht mehr auf Google verweisen sondern auf meine lokale CSS-Datei "style.css"

Was mir die ganze Zeit bei dieser Variante schon nicht verständlich ist, sind eben genau diese URL-Parameter:

?family=Jost:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i

Wie kann denn das lokal überhaupt funktionieren?

Nach meinem Verständnis stehen ja alle 18 Font-Weights (.woff und .woff2) in der lokalen CSS-Datei "style.css" und verweisen auf alle Font-Weights, die ich auch auf den Server, in mein Verzeichnis "assets/myfonts/", kopiert habe:

Lass ich diese URL-Parameter jedoch in der Mobirise Projekt-Datei "project.mobirise" ganz weg, dann werden verschiedene Typen, wie z.B. das <h4> Tag falsch dargestellt.

Ich bin aber auch der Meinung, dass Mobirise diese vielen (18) anderen Font-Weights sowieso nie und nirgends verwendet, insofern bezweifele ich den Sinn dieser Methode an sich.

... also dann so - das geht auch - erzeugt aber eine etwas andere Darstellung einiger Schrift-Tags wie z.B. dem <h4> Tag:

Code: Alles auswählen

    "siteFonts": [
      {
        "css": "'Jost', sans-serif",
        "name": "Jost",
        "url": "assets/myfonts/style.css"
      }
    ],

Ich weiß jetzt also nicht, ob mein neues Tutorial nach der Idee vom "stobi_de" überhaupt richtig ist, obwohl es geht - weil die Browser das irgendwie interpretieren.

Macht diese Aktion mit den URL-Parametern denn nicht eigentlich nur Sinn bei einem Verweis auf die Google-API? Kann die überhaupt beim Verweis auf meine lokale CSS-Datei etwas bewirken? Genau das verstehe ich eben nicht.

Wenn das alles so jetzt nur vom jeweiligen Browser eine zufällige Interpretation ist, dann würde ich wohl mein neues Tutorial wieder entfernen müssen und bei meinem ursprünglichen Tutorial bleiben, das ja meiner Meinung auch gut funktioniert, allerdings eben nur (in meinem Fall) mit 3 klar definierten Font-Weights.

... und Ja - ich habe ja in meinem ursprünglichen Tutorial in der lokalen CSS-Datei eben auch eine fette ("Bold") Schrift mit dabei:

https://www.mobirise-tutorials.com/Loca ... /style.css

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-Medium';
   font-display: swap;
   src: url('Jost-Medium/font.ttf');
}

Natürlich könnte ich auch jeder der 5 Schriftgrößen, die bei Mobirise überhaupt möglich sind, ein anderes statisches Font-Weight geben - dann also 5 angeben anstatt 3.

Woher soll ich zum Beispiel überhaupt bei den statischen Typen der Schrift "Jost" erkennen, welches Font-Weight nun zum Beispiel "Jost-Regular" genau hat? Im Screenshot unten sind sämtliche statischen Font-Weights der Schrift "Jost" zu sehen. Dafür gibt es aber nur einen Namen und ich kann kein Gewicht von 400 oder 700 ausmachen.

Bei den statischen Schrifttypen scheint aber "Regular" immer das Gewicht 400 zu haben - und so habe ich das auch bei meinem ursprünglichen Tutorial "Lokale Fonts" gewählt:

https://fonts.google.com/specimen/Jost?query=Jost

So wird es ja auch von Mobirise selbst für lokale Fonts empfohlen.

Was soll ich tun Klaus?

Was meinst Du, denn Du scheinst ja diese ganze Sache mit den URL-Parametern zu verstehen - ich tatsächlich nicht

Ich will auf keinen Fall ein falsches Tutorial beibehalten obwohl es funktioniert und ich da gestern obendrein noch stundenlang dran gearbeitet hatte.

[Tommy Herrmann]

Offensichtlich muss ich in Bezug auf Schriften noch eine Menge dazulernen

Wenn ich als URL eine absolute URL, also zum Server mit meiner Domain (so wie auch vom "stobi_de" beschrieben) verwende, wirken die ?URL-Parameter ganz anders als bei einem relativen Verweis.

Auch die animierten Links funktionieren dann wieder - aber eben nur am Server und nicht bei der lokalen Publzierung. Lokal wird dann die Schrift nicht korrekt dargestellt, am Server schon.

Ich habe das jetzt auf meiner Seite und in meinem Tutorial geändert und bin fast sicher, dass die Schriften so korrekt dargestellt werden.

... wäre schön, wenn auch Klaus da nochmals guckt:

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




Vergleich


Hier von der neuen Methode. Das linke Fenster im Screenshot zeigt die Seite lokal publiziert, das rechte Fenster zeigt die Seite online am Server:

Bei der meiner alten Methode, mit dem Einlesen statischer Fonts, ist dagegen kein Unterschied lokal (linke Fenster) oder am Server (rechte Fenster):

[Klaus]

Ich guck heute Abend noch mal ...

denn Du scheinst ja diese ganze Sache mit den URL-Parametern zu verstehen

Ja klar solche WebServices zu schreiben ist u. A. ja auch mein Job ... hab gestern Abend erst wieder einen in Produktion gebacht.

Nur kurz:
Die Parameter wirken nur bei einem WebService (Rest/SOAP) oder z.B. auch bei einer PHP Datei die die URL Parameter auch auswertet, ist ja nur ein einfacher "GET Parameter" aber nicht bei einer lokalen Datei.
GET Parameter kennst Du doch, ist genau das Gleiche:
http://www.nof-tutorials.com/Formular-A ... orial.html
"http://www.nof-tutorials.com/Formular-A ... @Tester.de"

Wie kann denn das lokal überhaupt funktionieren?

Ja eben gar nicht daher sind die Parameter an einer lokalen Datei auch überflüssig, blöd ist dass man das auch überflüssige ? stehen lassen muss weil MR beim Publizieren noch was mit & dranhängt und das dann so bei einenr lokalen Datei nicht funktioniert, lässt man das ? geht es dann auch wenn das alles für nix gut is.

[Tommy Herrmann]

Jetzt habe ich es (glaube und hoffe ich) verstanden

Woher zum Teufel kennst Du diese alten Seiten von mir noch, die ich noch nicht mal selbst auf meiner Domain finden würde

Danke Dir ...

... dann ist also mein Tutorial so jetzt richtig:

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

Dennoch bevorzuge ich die statischen Fonts, dann weiß ich exakt was passiert und ich kann nicht wirklich einen Vorteil bei der dynamischen Methode erkennen...

... na ja - vielleicht doch - so hat man natürlich einen Haufen mehr Abstufungen, die Mobirise ja offensichtlich auch nutzt.

So steht es z.B. in dem globalen "CSS Editor" von Mobirise für das Standard-Thema "Mobirise5":

---

Ach ja wegen des "Google Translate".

Schalte mal auf Englisch um. Es ist erstaunlich wie gut Google inzwischen solche Texte übersetzt (ich weiß - nicht perfekt).

Gut, ich investiere auch bei jeder dieser Seiten sehr viel Zeit nur um den Text für die Übersetzung zu optimieren.

... also ich verändere Worte im Deutschen oder auch die Satzstellung, füge geschützte Leerzeichen ein und verwende die Google class="notranslate" so wie auch das <code> Tag </code> für Code-Bereiche, die nicht übersetzt werden dürfen.

[whippet]

Hallo Freunde,

das Problem (bei mir) ist nicht nur mit dem Browser (Chrome), es betrifft selbst die Mobirise-Applikation. Auch dort werden die lokal angebundene Schriften nicht fett dargestellt, was dann auch die Arbeit enorm erschwert. Hat diesbezüglich jemand eine Erklärung oder sogar Lösung?

Vielen Dank! Beste Grüße Peter

[Klaus]

Ja klar weil Du so immer nur einen Font pro Schrift hast auch wenn Du einen Variablen verwendest weil MR die Variablen offensichtlich nicht kennt und so im CSS der Bereich fehlt.

Trag doch mal nur zum Testen per Hand (per FTP holen, editieren und wieder hoch) die 2 Zeilen (hier fett) in Deine http://applewine.de/assets/fonts/style.css ein:
Die Lösung nach "stobi" sollte aber funktionieren.

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

[Klaus]

Ich habs mal ausprobiert ... ja ist so wie geschrieben:

[whippet]

Hallo Klaus, danke! Es ist für mich alles gut nachvollziehbar. Ich bin nur nicht in der Lage solche Dinge selbst zu richten. Ich habe es bereits geschrieben und werde dabei bleiben müssen, aber ich werde alle diese Schriften wieder online machen, trotz Abmahnungen, ich habe da keine andere Wahl. Beste Grüße Peter

[Tommy Herrmann]

Moin,

ich würde Dir vorschlagen auch mal nach meinem ganz neuen Tutorials mit den "Font-Weights" (Schriftgewichte) zu arbeiten. Vielleicht passt das besser am Mac.

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

Ich hatte eben mal am iPad eines Freundes, der in meine Haus ein Studio für Airbrush gemietet hat, geguckt und nach dieser Methode wird die Fettschrift offensichtlich viel intensiver dargestellt.

Ich poste hier später noch einen Screenshot von seinem Safari-Browser.

Das muss auch bei Dir funktionieren - das gibt's doch gar nicht.

[whippet]

Hallo Tommy, danke. Nur der Safari Browser macht keine Probleme, nur bei dem Chrome wird die Schrift nicht fett dargestellt. Und in Mobirise selbst auch nicht. Beste Grüße Peter

ps. die neue Einleitung schaue ich mir an.

[whippet]

Hallo an alle, eine blöde Frage, aber trotzdem, ich hätte eine Idee (oder vielleicht besser einen Wunsch), ob es nicht irgendwie möglich wäre die Zeile: "https://fonts.googleapis.com/css?family=" so zu verstecken, dass die Abmahnbüros es nicht feststellen können, woher die Schriften genau herkommen? Grüße Peter

[Tommy Herrmann]

- herrliche Idee - nein das geht natürlich gar nicht ...

Hier mein Screenshot vom "iPad-Pro" meiner Tutorial-Seite zu den "Font-Weights" am Safari-Browser.

Auch der Chrome-Browser stellt das vollkommen identisch dar.

Die fett gestellten Bereiche werden ganz klar und eindeutig dargestellt. Das muss also bei Dir auch gehen.

Teilansicht für größeren Ausschnitt:

[whippet]

- herrliche Idee - nein das geht natürlich gar nicht ...

auch nicht durch eine Umleitung? Man verweist zuerst zu einer Adresse irgendwo (fast egal wo) im Netz und von dort wird es an die richtige Adresse (google) geschickt. Könnte man da noch kurz nachdenken?

Ich bin echt nicht in der Lage die Änderung (auch wenn die Einleitung für mich absolut verständlich ist) selbst durchzuführen. P.

[Tommy Herrmann]

Ich wüsste keinen Weg - außerdem ist das ja auch nicht im Sinne der Sache ...

Was man umleitet wird schon vorher erfasst - man könnte auch mit CSS arbeiten, dann ist es unsichtbar aber steht ja dennoch im Quelltext.

... ich verstehe nicht, warum Du meinst das nicht zu schaffen. Das behauptest Du nach 2 Minuten - ohne es jemals probiert zu haben. Ich habe in diese Problematik gerade mindestens 50 Stunden Arbeit gesteckt.

[whippet]

Hallo Tommy, ich bin, genau wie alle anderen, sehr dankbar für alles, was du hier immer leistest. Ich bin einfach kein Programmierer und werde es wahrscheinlich auch nie sein. Deshalb haben mir 2 Minuten gereicht, um zu wissen, dass ich es nicht schaffen kann. Und wenn, dann müsste ich sehr viel Zeit und Energie investieren, aber da habe ich von beidem nur sehr wenig. Gruß Peter