Adding custom fonts to font manager

nward85 · December 20, 2017, 3:40pm

I am trying to add a custom font to the font manager, but the only resource I’ve found is how to add it to the customizer, and this is not what I want.

Any thoughts?

Prasant · December 20, 2017, 7:02pm

Hello @nward85,

Thanks for asking.

You can’t add custom font as a template, assuming that you are looking to add custom font under Templates > Fonts. But you have option to use Typekit that give you more option. For more information please refer following article:

https://theme.co/apex/forum/t/features-font-manager/101

Thanks.

eperroud · December 20, 2017, 7:53pm

As @Prasant said, for Typekit, you can use Templates > Fonts, set your code and done.
For custom fonts, including OTF, TTF and more, you can use the Use Any Font as alternative to.
The best font manager into WordPress is, imo, FontPress.
The hard way is creating your own css with a different directory to load your font from style.css (theme X or Pro). I’d recommend the FontPrep to help you, if you use Mac.

jade · December 20, 2017, 8:18pm

Thanks for helping out @eperroud.

nward85 · December 27, 2017, 1:11pm

Hmm okay. I do not want to use typekit because it does not have the font I want. So I will check out the recommended plugin. I know how to add the font via style.css etc. Just wish I could do so in the font manager.

mldarshana · December 27, 2017, 1:39pm

Let us know how it goes.

Thanks!

nward85 · December 27, 2017, 2:10pm

Okay so I have tried following the instructions on this topic: (there was no final reply on the thread, so I do not know if it works)

But I cannot seem to get it to work.
My style.css has:

@font-face {
font-family: 'Avenir-Next-Regular';
src: url('fonts/avenir-next-regular.eot');
src: url('fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'),
   url('fonts/avenir-next-regular.woff') format('woff'),
   url('fonts/avenir-next-regular.ttf')  format('truetype'),
}

And my functions has: (I can see it in the drop down in the theme options)

function my_custom_font($data){
  $data['Avenir-Next-Regular'] = array(
          'source'  => 'Custom',
          'family'  => 'Avenir Next Regular',
          'stack'   => '"AvenirNextRegular", sans-serif',
          'weights' => array( '400' )
        );
 array_push($data, $data['Avenir-Next-Regular']);

  return $data;
  
}
add_filter('x_fonts_data', 'my_custom_font');

ruenel · December 27, 2017, 7:22pm

Hello There,

I can see that you are using an older version of Pro theme. Please update it to version 1.2.7

To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

nward85 · December 27, 2017, 10:18pm

I am already using 1.2.7, so I am fully updated.

ruenel · December 27, 2017, 11:24pm

Hello There,

I was able to login and modified the code. I should be this:

// Add custom font name in the Theme Option's typography section
// =============================================================================
function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'Avenir Next Regular',
          'stack'   => '"AvenirNextRegular", sans-serif',
          'weights' => array( '400' )
        );
 array_push($data, $data['mywebfont']);

  return $data;
  
}
add_filter('x_fonts_data', 'my_custom_font');
// =============================================================================

Please understand that this code will only add the custom font in the Typography section. The custom font will not display in the X > Launch > Templates > Fonts section. In order to use the custom font, you must disable the font manager.

Hope this helps.

nward85 · December 27, 2017, 11:59pm

I do not notice any changes…

I did this but it keeps re-enabling on its own. Whenever I go back to the theme options it is turned back on, weird.

I understand. Its a shame though, maybe in the near future Themeco will implement a feature to add our own fonts in the font manager/templates.

ruenel · December 28, 2017, 12:11am

Hello There,

The font manager is already disabled.

And please update the css code. The font file must be using absolute path:


@font-face {
  font-family: 'Avenir-Next-Regular';
  src: url('http://example.com/fonts/avenir-next-regular.eot');
  src: url('http://example.com/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'),
       url('http://example.com/fonts/avenir-next-regular.woff') format('woff'),
       url('http://example.com/fonts/avenir-next-regular.ttf')  format('truetype'),
}

Please change the example.com with your domain name.

Please clear your browser cache and test your site again.

nward85 · December 28, 2017, 1:12am

Still does not work.

I’ve tried:

@font-face {
  font-family: 'Avenir-Next-Regular';
  src: url('https://MYDOMAIN/fonts/avenir-next-regular.eot');
  src: url('https://MYDOMAIN/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'),
       url('https://MYDOMAIN/fonts/avenir-next-regular.woff') format('woff'),
       url('https://MYDOMAIN/fonts/avenir-next-regular.ttf')  format('truetype'),
}

and I’ve tried (which I thought is the correct absolute path?):

@font-face {
  font-family: 'Avenir-Next-Regular';
  src: url('https://MYDOMAIN/wp-content/themes/pro-child/fonts/avenir-next-regular.eot');
  src: url('https://MYDOMAIN/wp-content/themes/pro-child/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'),
       url('https://MYDOMAIN/wp-content/themes/pro-child/fonts/avenir-next-regular.woff') format('woff'),
       url('https://MYDOMAIN/wp-content/themes/pro-child/fonts/avenir-next-regular.ttf')  format('truetype'),
}

My functions is:

function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'Avenir Next Regular',
          'stack'   => '"AvenirNextRegular", sans-serif',
          'weights' => array( '400' )
        );
 array_push($data, $data['mywebfont']);

  return $data;
  
}
add_filter('x_fonts_data', 'my_custom_font');

I’ve cleared my browser cache so many times, and I have no caching plugins installed. My host does not have caching either.

ruenel · December 28, 2017, 1:54am

Hello There,

At the moment, the font file does not exist when you test the actual url. It seems that your absolute url is not correct. Please make sure that it is pointing to the correct directory where you have uploaded the font file.

@font-face {
  font-family: 'Avenir-Next-Regular';
  src: url('https://www.example.com/correct-directory/fonts/avenir-next-regular.eot');
  src: url('https://www.example.com/correct-directory/fonts/avenir-next-regular.eot?#iefix') format('embedded-opentype'),
       url('https://www.example.com/correct-directory/fonts/avenir-next-regular.woff') format('woff'),
       url('https://www.example.com/correct-directory/fonts/avenir-next-regular.ttf')  format('truetype'),
}

Hope this helps. Please let us know how it goes.

nward85 · December 28, 2017, 2:40am

Clearly! DOES NOT WORK!

ruenel · December 28, 2017, 4:38am

Hello There,

I have investigated your site and it turns out that the font were not saved. I modified the code and the font family is now saved.

Please check your site now.

nward85 · December 28, 2017, 12:44pm

Yes! So you mean we had to go to Theme options and just click save again? :-/

basanta · December 28, 2017, 1:33pm

Hi There,

The fonts are loading in your site. No need to save it again. Please clear your cache and check again.
Let us know how it goes.

Thanks

nward85 · December 28, 2017, 1:45pm

Yes I know they are but I would like to no what the issue was if I ever need to replicate it on another site.

rad · December 28, 2017, 2:17pm

Hi there,

In some case, yes, you need to save it again. Though it’s very rare and usually happens when you do update your site. But I’m not really sure what fonts aren’t saved, it could be the font file path which must be corrected first.

Thanks!