Another Font Question

[Gidget Hall]

Hey Tom, I searched the previous questions on how to add specific fonts but didn’t quite find what I was looking for. I’ve tried a couple of font plugins but really don’t care for any of them. I have just two specialty fonts that I’ve chosen for branding purposes on a new website and for related merchandise. One will be for header tags and the other for body copy. How-to help to add these fonts to customize? Thanks!

[Tom]

Hi there,

If it’s not a Google Font, you’ll have to embed it manually like this: https://css-tricks.com/snippets/css/using-font-face/

Make sure you have the proper licensing to use the font 🙂

[Christoph]

Hi, hello,

I want to add this font: http://www.calendasplus.com (yes, I have license 🙂

I uploaded the font and added:

@font-face {
  font-family: 'Calendas Plus';
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.eot'); /* IE9 Compat Modes */
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
       font-weight: normal;
}

@font-face {
  font-family: 'Calendas Plus';
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.eot'); /* IE9 Compat Modes */
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_bold-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
       font-weight: bold;
}

@font-face {
  font-family: 'Calendas Plus';
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.eot'); /* IE9 Compat Modes */
  src: url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/public/wp-content/themes/generatepress/fonts/calendas_plus_italic-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
       font-weight: italic;
}

But can not select this in Appearance > Personalize … Why? What I did wrong?

Greetings,
Chris

[Tom]

Awesome! The next step is adding to the Customizer lists: https://docs.generatepress.com/article/generate_typography_default_fonts/

[Christoph]

Good morning Tom, this exceeds my skills ;-(

[Leo]

Try replacing My Font Name in the code with Calendas Plus

[Christoph]

Ok, I (1) Installed the plugin CODE SNiPSET, (2) I added the code from the link from Tom and (3) replaced like mentioned from Leo … But still can not find the font in Appearance > Personalize

[Leo]

Can you show me the exact code you’ve added?

And also double check the Snippet is activated?

Thanks!

[Christoph]

add_filter( 'generate_typography_default_fonts','tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'Calendas Plus';
    return $fonts;
}

Yes, Snippet is activated …

[Tom]

So now when you go into Customize > Typography and open one of the font lists, that font is no where to be found?

[Author]

Posts