[Stellenwidget] Anpassung Design, Farben, Schriftarten

Empfehlungsbund Q&A
, ,
1

Ich möchte eine andere (Standard)-Schriftart verwenden, die die Widget-Auswahl nicht anbietet - was soll ich tun?

Wenn Sie sicher sind, dass eine Vielzahl der Nutzenden diese Schriftart installiert hat (z.B. weil diese bei Word mit dabei ist), können Sie mit folgendem Code in den Widgeteinstellungen „Custom CSS“ eine Schriftart angeben. Hier z.B. Helvetica (Windows) bzw. deren Pendent Helvetica Neue (MacOS): ``

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
  font-family: "Helvetica Neue", Helvetica, sans-serif !important;
}
2

Wie kann ich eigene Schriftarten oder Schriftfarben im Widget bzw. im Bewerber/Beobachter-CICI verwenden (außer den vorgegebenen)?

Sie können im Widget Custom-CSS verwenden. Font müssen Sie aus Copyright-Gründen selbst auf Ihrer eigenen Karriere-Website einbinden oder Google Fonts verwenden (in dem Fall müssen Sie ggf. Ihre eigene Datenschutzerklärung anpassen).

Beispiel-Code:

@font-face {
  font-family: 'Daxline';
  font-weight: normal;
  font-style: normal;
  src: url('https://www.firma.de/fonts/daxline-pro-regular.eot?#iefix') format('embedded-opentype'), url('https://www.firma.de/files/fonts/daxline-pro-regular.woff') format('woff'), url('https://www.firma.de/files/firma/fonts/daxline-pro-regular.woff2') format('woff2'), url('https://www.firma.de/files/firma/fonts/daxline-pro-regular.ttf') format('truetype');
}
body, h1, h2, h3, h4, h5, h6 {
  font-family: Daxline;
}

Beispiel-Code zur Einbettung von Google-Fonts:

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono%3Aregular%2C700%2C700%2Cregular%7CIBM+Plex+Sans%3Aregular%2Cregular&display=swap&ver=3.9');

h1 {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700 !important;
}

h2, h3, h4, h5, b, strong, blockquote {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500 !important;
}

body {
  font-family: "IBM Plex Sans", sans-serif;
}

Hinweis zu PDF-Vorlagen im CICD (Postbewerbungen/Vertragsunterlagen): Dort können Sie ebenfalls eigene Schritarten verwenden. Diese PDFs werden allerdings auf unserem Server erstellt und dieser muss bei der Erstellung die Schriftart installiert haben. Die meisten gängigen Fonts sind dort installiert, insbesondere auch die Mehrzahl der Google Fonts.

3

Unsere Firma hat einen eigenen Font, aber diser kann aus technischen Gründen (Content-Security Header) nicht selbst gehostet werden - was können wir tun?

Wenn Ihre Firma den Font nicht selbst hosten kann oder Ihr Webserver wegen Security Headern ein Einbetten untersagt, dann hosten wir den Font. Das tun wir aber NUR, wenn er die SIL Lizenz oder etwas Vergleichbares hat (keine gekauften Fonts von Fontspring!).

In dem Fall, aktuell manuelle Admin arbeit:

Im Live-System neuen Ordner in public/uploads/fonts
alle Font Varianten einfügen
Font Declarations in Widget Konfiguration mit kompletter URL (bms.empfehlungsbund.de), da die Stylesheets auf S3 liegen:

@font-face { 
font-family: 'Lato';
       src: url('/uploads/fonts/lato/lato-black.eot');
       src: url('/uploads/fonts/lato/lato-black.eot?#iefix') format('embedded-opentype'),
           url('/uploads/fonts/lato/lato-black.woff2') format('woff2'),
           url('/uploads/fonts/lato/lato-black.woff') format('woff'),
           url('/uploads/fonts/lato/lato-black.ttf') format('truetype'),
           url('/uploads/fonts/lato/lato-black.svg#latoblack') format('svg');
       font-weight: 800;
       font-style: normal;
   }
   @font-face {
       font-family: 'Lato';
       src: url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.eot');
       src: url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.eot?#iefix') format('embedded-opentype'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.woff2') format('woff2'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.woff') format('woff'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.ttf') format('truetype'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-bold.svg#latobold') format('svg');
       font-weight: 700;
       font-style: normal;
   }
   @font-face {
       font-family: 'Lato';
       src: url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.eot');
       src: url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.eot?#iefix') format('embedded-opentype'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.woff2') format('woff2'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.woff') format('woff'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.ttf') format('truetype'),
           url('https://bms.empfehlungsbund.de/uploads/fonts/lato/lato-regular.svg#latoregular') format('svg');
       font-weight: 400;
       font-style: normal;
   }
   body,h1,h2,h3,h4,h5,h6 {
     font-family: Lato, sans-serif !important;
   }