Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Another Font Question

Home Forums Support Another Font Question

Home Forums Support Another Font Question

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #195569
    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!

    #195620
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #401659
    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

    #401661
    Tom
    Lead Developer
    Lead Developer
    #401749
    Christoph

    Good morning Tom, this exceeds my skills ;-(

    #402033
    Leo
    Staff
    Customer Support

    Try replacing My Font Name in the code with Calendas Plus

    #402154
    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

    #402220
    Leo
    Staff
    Customer Support

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

    And also double check the Snippet is activated?

    Thanks!

    #402237
    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 …

    #402364
    Tom
    Lead Developer
    Lead Developer

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.