JetBrains Mono
JetBrains Mono ist der Default Font, der IDE PhpStorm. Auf dieser Seite wird gezeigt, wie man diesen Font in einer Webseite verwenden kann.
JetBrains Mono Lizenz
Zitat von der JetBrains Mono Site
JetBrains Mono typeface is available under the
SIL Open Font License
1.1 license and can be used free of charge, for both commercial and non-commercial
purposes. You do not need to give credit to JetBrains, although we will appreciate
it very much if you do.
Webfont Format erzeugen
Auf der JetBrains Mono Seite oder auf der Google Fonts JetBrains Mono Seite kann man die Daten des Fonts im TrueType (TTF) Format herunterladen. Für eine Webseite werden diese Daten aber im WOFF2 benötigt.
Ist der Font in der Google Fonts Sammlung enthalten (trifft für JetBrains Mono zu), kann man mit Hilfe des Tools Google Fonts Helper direkt die WOFF2 Datei erzeugen. Ist der Font nicht Teil der Google Fonts Sammlung, kann man z.B. mit Hilfe des Tools TTF to WOFF2 Converter eine WOFF2 Datei erzeugen.
Webfont verwenden
Mit der CSS @font-face Anweisung wird der Font der Webseite zur Verfügung gestellt.
@font-face {
font-display: swap;
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: normal;
src: url('.../jetbrains-mono-v18-latin_latin-ext-regular.woff2') format('woff2');
}
Zusätzlich muss die Nutzung des Fonts beschrieben sein. Will man, wie in diesem Beispiel, den Font auf der gesamten Webseite verwenden, kann man z.B. folgendes schreiben.
html {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-size: 100%;
font-weight: normal;
}
Hier sind 'Courier New' und monospace Fallbacks für den Fall, das der gewünschte Font nicht geladen werden kann.