additional fonts

Neben der Schriftauswahl für:

  • body (Standardschrift für Text)
  • h1, h2 ... (Schrift für Titel)
  • nav (Schrift für die Navigation)
  • bold / strong (Schrift für fette Schnitte)

Gibt es zwei Dropdown-Auswahlmöglichkeiten:

  • Konvergent-Projekt-Font3 > class="Font3"
  • Konvergent-Projekt-Font4 > class="Font4"

Die Klasse muss im HTML-Code hinterlegt werden durch:

  • manuellen Eintrag im Quellcode > class="Font3" oder class="Font4"
  • verwenden der Klasse als Zeichenformat in InDesign
  • im Dropdown "Formate" der Markierung zuweisen
<span class="Font3">anderer Schrift!</span>

Klasse: Font3

Dieser Lauftext enthällt eine Auszeichnung in anderer Schrift! (Im Editor ROSA unterlegt, die Schrift ist erst in der Website geladen!)
In diesem Fall wurde die Schrift "Know your product" im Dropdown > Einstellungen > Fonts zugewiesen und mit "Formate > Font3" der Markierung zugewiesen.

Klasse: Font4

Die Klasse kann jedem Text, Titel oder einem ganzen Absat zugeordnet werden.

Die Schrift "My Underwood" kann einer Markierung zugeordnet werden.

Kann einem Titel zugeordnet werden

Kann einem Absatz zugeornet werden! Indem zusätzlich weitere Zeichenformate verwendet werden. Sie kummulieren sich. Lorem ipsum dolor sit amet, turpis phasellus erat dolor, at orci nullam vitae nam, nunc urna rerum quis. Lorem ipsum dolor sit amet, turpis phasellus erat dolor, at orci nullam vitae nam, nunc urna rerum quis. Lorem ipsum dolor sit amet, turpis phasellus erat dolor, at orci nullam vitae nam, nunc urna rerum quis.

 

Anleitung: zusätzliche Webfonts hinterlegen und Anwenden

Quelle von Webfonts: https://www.fontsquirrel.com/

Download "Webfont Kit"
oder Download OTF und den Webfont-Generator verwenden.

FTP: Konvergent-Projektordner/public/fonts
> schriftbezeichnung.eot
> schriftbezeichnung.ttf (optional aber übersichtlich)
> schriftbezeichnung.woff
Die Schriftdateien hochladen.

Eintrag ins Dropdown:
Datei apps/code/extensions/CustomSiteConfig.php

$sytemfonttypes = [
'' => 'Schrifttyp wählen',
'GothamPro' => 'GothamPro Regular',
'GothamPro-Bold' => 'GothamPro Bold',
'schriftbezeichnung' => 'Bezeichnung der Schrift',
...
];