Custom font in Customizer or How to use for Global Headings & Logo Font

[powrider686]

Hi there,
On my site, http://dhbrown.wpengine.com/, user: demo, password: dhbrown, I’m trying to use a custom font “Vanity-Light”, which I have uploaded via ftp and have it working using @font-face, but I was wondering how I can make it global and get it to show up in the customizer as an option so I can use it for global heading and body copy.

How could I accomplish this?

Here is the Css I have used and the font file location:

@font-face {
font-family: ‘Vanity-Light’;
src: url(’/dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.eot’);
src: url(’//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.woff2’) format(‘woff2’),
url(’//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.woff’) format(‘woff’),
url(’//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.ttf’) format(‘truetype’),
url(’//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.svg#Vanity-Light’) format(‘svg’),
url(’//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.eot?#iefix’) format(‘embedded-opentype’);
font-weight: normal;
font-style: normal;
}

Thanks for the help!

Marcus

[ruenel]

Hello There,

Thanks for writing in! You will have to update your code and use this:

@font-face {
  font-family: 'Vanity-Light';
  src: url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.eot');
  src: url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.woff2') format('woff2'),
  url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.woff') format('woff'),
  url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.ttf') format('truetype'),
  url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.svg#Vanity-Light') format('svg'),
  url('//dhbrown.wpengine.com/wp-content/themes/x-child/fonts/Vanity-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

Even if you have the code above, it will still not display in the theme options typography section. Before you can do that, since what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

After the child theme is set up, please add the following code in your child theme’s functions.php file

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

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

If you are not seeing the font name, you must have enabled the Font manager. Please disable it and look for the Font name again in the typography section.

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