Google Fonts hinzufügen

[thobie]

Wie füge ich dem Theme ColorMag in WordPress neue Google Fonts hinzu, die ich von fonts.google.com heruntergeladen habe und im Customizer verwalten will?

 

[Difool]

Du hast in diesem Theme folgenden Bereich:

wp-content/themes/dein_child-theme/assets/fonts/

… oder in deinem Child-Theme davon:

wp-content/themes/dein_theme/assets/fonts/

… da kommen die Font-Dateien rein – welche Font-Datei-Formate siehst du anhand der bereits vorhandenen.

Dann importierst du diese im CSS mit relativen, dynamischen Pfaden der @font-face Angaben:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v29-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

^^ mit obigen Verfahren kannst du dann schon einfach im CSS des Themes die Fonts einsetzen und ansprechen –
um die Fonts aber in den Customizer zu bekommen, benötigst du weitere Schritte.

Z.B. in der functions.php mit folgendem Snippet die Fonts dem Customizer hinzufügen:
(wobei du hier die function-Angabe von Theme ColorMag nehmen musst – folgende function ist ein Beispiel)

// Add custom font to font settings
function MU_add_custom_fonts() {
    return array( 'My Custom Font' ); // You can add more then 1 font to the array!
}

edit:
Oder du verwendest ein „Font Manager Plugin“.