Archived topic

Another Font Question

9 replies · Started by Gidget Hall on May 20, 2016

Viewing posts 1–10 of 10

May 20, 2016 at 11:28 am #195569

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!

May 20, 2016 at 11:30 pm #195620

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 :)

October 11, 2017 at 7:01 pm #401659

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

October 11, 2017 at 7:11 pm #401661

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

October 12, 2017 at 1:54 am #401749

Good morning Tom, this exceeds my skills ;-(

October 12, 2017 at 8:59 am #402033

Try replacing My Font Name in the code with Calendas Plus

October 12, 2017 at 12:06 pm #402154

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

October 12, 2017 at 1:49 pm #402220

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

And also double check the Snippet is activated?

Thanks!

October 12, 2017 at 2:07 pm #402237

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 ...

October 12, 2017 at 10:13 pm #402364

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

This archived topic is closed to new replies.

Start building better websites today.