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

  1. Trirong - Fonts  - Plugin
  2. Tex-Gyre - Fonts  - Plugin 
  3. Noto - Sans Fonts  - Plugin
  4. Noto - Serif  Fonts  - Plugin