Neue Fonts in CKeditor hinzufügen

Neue Fonts in CKeditor hinzufügen

Die Möglichkeit mit Hilfe des CK-Editors auf seiner Webseite beim Schreiben eines Beitrages einen Zeichensatz auszuwählen ist eher die Ausnahme. Meistens wird im Template festgelegt welche Textteile in welchem Zeichensatz dargestellt werden. Aber es gibt durchaus Fälle, wo es erwünscht ist, dass beim Bearbeiten eines Beitrages ein anderer Font gewählt werden kann. Dazu genügt es nicht, wenn man in der Konfiguration des CK-Editors (unter admin/config/content/ckeditor/edit/) die Schaltfläche für die Fontauswahl aktiviert. Zusätzlich muss man CK-Editor mitteilen, welche Fonts überhaupt verfügbar sind. Dies geschieht durch einen Eintrag in dem Profil, das diese Fonts nutzen soll (in der Regel wird es zumindest das Profil für "FullHTML" sein. Dazu öffnet man das Profil zum Bearbeiten und geht ganz nach unten auf "Erweiterte Optionen". Dort trägt man im Feld "Angepasste JavaScript-Konfiguration" die Variable config.font_names ein und gibt ihr die Werte für die Fonts mit, so wie sie im Theme im CSS definiert sind.

Hier ein Beispiel mit dem vier Zeichensätze eingebunden werden, die anschließend in der Font-Auswahlbox des CK-Editors zur Verfügung stehen:

Beispiel für die Einbindung von Fonts in die Fontauswahl von CK-Editor

Die Fonts-Definition erfolgt in unserem Beispiel in der Datei ./sites/all/themes/mytheme/css/mytheme.styles.css und sieht so aus

 

/* Google-Font importieren
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:300,400,700);
 
/**
 * auf dem Server installierte Fonts einbinden
 * $FONT-FACE
 */
@font-face {
  font-family: "TheAntiquaB Semilight";
  src: url("../fonts/TheAntiquaB-W4SemiLight.otf"); }
@font-face {
  font-family: "TheAntiquaB LT";
  src: url("../fonts/TheAntiquaB_LT_400.eot");
  src: url("../fonts/TheAntiquaB_LT_400.eot?#iefix") format("embedded-opentype"), url("../fonts/TheAntiquaB_LT_400.woff") format("woff"), url("../fonts/TheAntiquaB_LT_400.svg#TheAntiquaB_LT_400") format("svg");
  font-weight: normal;
  font-style: normal; }
 
usw. ;-)