Webfonts

Viele Templates liefern eigene Fonts oder auch Icon-Fonts in Unterverzeichnissen mit.

* Eine Standardmethode ist die Einbettung eines Google - Fonts über @import, der dann einen schnellen Font im Woff2 - Format hochlädt, den leider viele ältere Browser nicht verarbeiten können, die dann ein Fallback haben, so daß die Webseite dann völlig anders aussehen kann.

Für Typesetter stehen auch eine Reihe lokaler Font-Plugins wie Roboto und mein Noto zur Verfügung, die auch das allgemein verbreitete Woff-Format und evtl. auch eof und das große SVG mitliefern, wodurch ein einheitlicheres Aussehen der Seite erreicht wird.

Die Fonts der Plugins sind im CMS eingebettet (über css) und erscheinen auch im Dropdown der Ckeditor-Fontliste.

Font - Stärke

Browser wie Opera und besonders Chrome liefern oft ein dünnes schlecht lesbares Schriftbild. Hierzu ein Patch :

body, div, p   { -webkit-font-smoothing: antialiased !important;
    -webkit-text-stroke: .02em rgba(51,51,51,0.30);    font-size: 0.9625rem;
    }

* In Chrome kann man in der URL chrome://flags/ den Punkt : Accelerated 2D canvas auf Disable stellen.

Andere Einstellungen zum Testen hängen auch vom verwendeten Font ab :

text-shadow: 1px 1px 1px rgba(0,0,0,0.004); 
text-rendering: optimizeLegibility !important;
transform: rotate(-0.0002deg);
backface-visibility: hidden;

/* Nur für Firefox - wenn durch obiges der Font zu dick wird u.a. - einige Beispiele */

@-moz-document url-prefix() {
 body, div, p   { font-size: 0.9625rem; font-weight: 300;
                 -moz-osx-font-smoothing: grayscale;   
                 -moz-font-smoothing: unset;  }
}

* Statt body, div, p können natürlich auch andere Tags wie ul und ol oder div#xyz ul li a verwendet werden .

Font - Plugins

Trirong - Fonts - Plugin
Tex-Gyre - Fonts - Plugin
Noto - Sans Fonts - Plugin
Noto - Serif Fonts - Plugin