WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 16.09.2016 11:11:37

enni
Mitglied

Eigene Schriftarten

Hallole,

ich hätte da mal eine (hoffentlich nicht allzu dumme) Frage. Ist es möglich, wie bei den verschiedenen Homepagebaukastensystemen z.B. Überschriften in eigenen Schriftarten anzeigen zu lassen? Wenn ja, wie? Gibt es da ein Plugin oder so? ops

Beispiel (das ist richtiger markierbarer Text):

ueberschrift.jpg

Vielen dank für die Hilfe
Enni

Offline

#2 16.09.2016 11:46:23

enni
Mitglied

Re: Eigene Schriftarten

Sorry für dämliche Frage - das ist ja voll einfach. roll

Please Close.

Offline

#3 16.09.2016 11:49:48

florian
Administrator

Re: Eigene Schriftarten

Ein Plugin gibt es dafür nicht.

Was Du machen kannst: Such dir auf Google Fonts die Schriftarten aus, die Du gern verwenden möchtest. Klick auf das + bei der jeweiligen Schriftart, um sie zu einer "Collection" hinzuzufügen. Daraus wird dann eine Styleanweisung generiert, die Du nach Klick auf "1 Family Selected" markieren und in die Zwischenablage kopieren kannst, z.B.

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

(Siehe Screenshot im Anhang zu diesem Beitrag)

Bearbeite nun mit dem AFE (oder per FTP-Verbindung und HTML-Editor wie notepad++ o.ä., nicht Word!) die index.php des verwendeten Templates Deiner Website und füge im Head-Bereich (also zwischen <head>...</head>) die von Google generierte Zeile Code ein und speichere die Änderung.

Nun öffne auf dieselbe Weise das Stylesheet (die CSS-Datei), das zum Template gehört. Dieses hat keinen bestimmten Namen, oft heißt es styles.css, kann aber auch anders heißen. Suche darin nun z.B. die Festlegung, wie Überschriften zweiter Ordnung dargestellt werden sollen, und bearbeite oder - falls noch nicht vorhanden - ergänze diese:

h2 {
  font-size:1.5em;
  color:#F46F2E;
  font-family: 'Pacifico', cursive;
}

Speichere die Änderungen.

Schon würden alle Überschriften 2. Ordnung in der Pacifico und orange dargestellt.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#4 16.09.2016 12:04:13

enni
Mitglied

Re: Eigene Schriftarten

Danke Florian, dass mit Google habe ich auch gerade gefunden - dass es so einfach ist, hätte ich nicht gedacht.

Vielen Dank nochmals für die Hilfe
Enni

Offline

#5 16.09.2016 13:25:36

petero
Mitglied

Re: Eigene Schriftarten

Hallo, ich würde hier gerne mit einer Frage aufspringen.
Für ein Intranet-Projekt muss ich eine Schriftart einbinden, die lokal bzw auf dem Server gespeichert werden soll. Gibt es nicht auch eine Möglichkeit, diese im Template abzulegen? Gibt es da eine Beschreibung?
Gruß Peter


WBCE Version: 1.5.4
Tag: 1.5.4
PHP Version: 8.0.22

Offline

#6 16.09.2016 14:09:13

florian
Administrator

Re: Eigene Schriftarten

Das ist ohne weiteres möglich. Zunächst brauchst Du die gewünschte Schriftart als Webfont.
Auf (z.B.) fontsquirrel.com stehen die Schriften je nach Lizenz bereits fertig als Webfont zur Verfügung oder können im dortigen Webfont-Generator in die erforderlichen Formate konvertiert werden.
Dann lädst Du diese Dateien auf den Server (z.B. in ein Unterverzeichnis des Template-Verzeichnisses).
Im Stylesheet initiierst Du sie mit @font-face. Im WBCE-STandard-Frontend-Template (das seine Schriften übrigens auf genau diese Weise selbst mitbringt) sieht das so aus:

@font-face {
    font-family: 'dosis';
    src: url('fonts/dosis-bold-webfont.eot');
    src: url('fonts/dosis-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dosis-bold-webfont.woff2') format('woff2'),
         url('fonts/dosis-bold-webfont.woff') format('woff'),
         url('fonts/dosis-bold-webfont.ttf') format('truetype'),
         url('fonts/dosis-bold-webfont.svg#dosisbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'dosis';
    src: url('fonts/dosis-medium-webfont.eot');
    src: url('fonts/dosis-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dosis-medium-webfont.woff2') format('woff2'),
         url('fonts/dosis-medium-webfont.woff') format('woff'),
         url('fonts/dosis-medium-webfont.ttf') format('truetype'),
         url('fonts/dosis-medium-webfont.svg#dosismedium') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'dosis';
    src: url('fonts/dosis-regular-webfont.eot');
    src: url('fonts/dosis-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/dosis-regular-webfont.woff2') format('woff2'),
         url('fonts/dosis-regular-webfont.woff') format('woff'),
         url('fonts/dosis-regular-webfont.ttf') format('truetype'),
         url('fonts/dosis-regular-webfont.svg#dosisregular') format('svg');
    font-weight: 300;
    font-style: normal;
}

Dann nur noch jeweils die Schriftart zuweisen, z.B.

body {
  font-family: 'dosis', sans-serif;
  margin:0;
  padding:0;
  height:100%;
  color:#303030;
}

Beitrag geändert von florian (16.09.2016 14:10:07)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#7 16.09.2016 14:20:15

petero
Mitglied

Re: Eigene Schriftarten

Danke  thumb_up


WBCE Version: 1.5.4
Tag: 1.5.4
PHP Version: 8.0.22

Offline

Fußzeile des Forums

up