Custom font

Hello,
I would like to upload the gotham font family to my site. It sis not a google font how can I do this? Thank you

Hi There,

Thanks for writing in!

To resolve your issue, please check out this thread:

Because 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 your child theme is set up, please do this:

  • First, you must upload all the Gotham font files into your child theme’s folder.
  • Second, you add a css code in your child theme’s style.css with something like this:
@font-face {
  font-family: 'Gotham';
  src: url('http://example.com/fonts/gotham.eot');
  src: url('http://example.com/fonts/gotham.eot?#iefix') format('embedded-opentype'),
       url('http://example.com/fonts/gotham.woff') format('woff'),
       url('http://example.com/fonts/gotham.ttf')  format('truetype'),
}

This is just an example code. You will have to supply the correct font file names and the correct folder location of the files.

  • And lastly, you will nee to 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'  => 'Gotham',
          'stack'   => '"Gotham", sans-serif',
          'weights' => array( '400' )
        );
 array_push($data, $data['mywebfont']);

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

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

thanks for your response but unfortunately that did not work. It is still using Helvetica or Montserrat. The only way it work is if I put a class on each one and like this: font-family:Gotham-Book !important; That would be really time consuming to do to each text block. Please advise. I attached 2 screenshots of my code. Thank you.

Hi Jennine,

Could you please provide us with an example page URL, so that we can look into your issue.

Also we may require your WordPress and FTP credentials to check your code. You can use the secure note option to submit those information.

Thanks!

sure here is the url.

Hi @Jennine

Please check this screenshot:

As you can see you need to replace public_html with jpdigitalstudios.com which is your website URL, then you need to upload these fonts with these extensions ".eot, .woff, .ttf" to your fonts directory in the child theme.

Thanks.

ok i did what you said but its still not finding the font files. I cant seem to find what I am doing wrong. Please see screenshots below. Thank you

Hi Jennine,

The site is loading the font Gotham-Book now, please add the line of custom CSS below to Theme Options > CSS

body {font-family: 'Gotham-Book' !important;}

And set your Text/Headline element font-family to Inherit.

Hope it helps,
Cheers!

thank you. What did you do to make it work incase I would like to add another font.

Hi Jennine,

I did not do anything, your site is already loading the Gotham-Book font when I checked it, that’s what I mean above.

What I advise to you is how you can apply the Gotham-Book font to your text and headline, and that is one way of doing it. We set the font-family: 'Gotham-Book' on the body so your text or headline can inherit it.

The other way is via INLINE STYLE or via CLASS, if you want to add additional custom font you can follow the guide that is provided here.

To learn more custom CSS (when your schedule allows), you can inspect your site using Chrome’s developer tools to see the styling that is applied to an element and then using custom CSS to override it. You can find more info on how to check for CSS selectors here. Then information about writing your custom CSS here.

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.