[Jared BParticipant]

Hey gang, I’ve added the following code to my child theme functions.php template but no change is made to my fonts.

add_action( 'wp_head', 'x_custom_fonts' );
function x_custom_fonts(){
	?>
	<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7438514/6412152/css/fonts.css" />
	<?php
}

The fonts selected in the customizer are still in effect. How do I make the change take effect?

My url is percolatorspace.com but I’m currently behind a coming soon plugin.

Thanks!

[RupokMember]

Hi there,

Thanks for writing in! Did you use the font family in CSS to use your loaded font? Note that above procedure is just loading the font to your site. That doesn’t mean it will be used automatically. You have to declare the font-family (that you loaded) for your elements.

Cheers!

[Jared BParticipant]

Hi Rupok,

I have uploaded the fonts to a folder on my server as described here: http://www.typography.com/cloud/user-guide/moving-to-production

Do I need to edit my CSS in additionally? These are the styles I’m hoping to use:

font-family: “Gotham A”, “Gotham B”;
font-style: normal;
font-weight: 400;
400 italicgotham
font-family: “Gotham A”, “Gotham B”;
font-style: italic;
font-weight: 400;
500 gotham
font-family: “Gotham A”, “Gotham B”;
font-style: normal;
font-weight: 500;
500 italicgotham
font-family: “Gotham A”, “Gotham B”;
font-style: italic;
font-weight: 500;
700 gotham
font-family: “Gotham A”, “Gotham B”;
font-style: normal;
font-weight: 700;
700 italicgotham
font-family: “Gotham A”, “Gotham B”;
font-style: italic;
font-weight: 700;
800 gotham
font-family: “Gotham A”, “Gotham B”;
font-style: normal;
font-weight: 800;

[Nabeel AModerator]

Hi again,

Yes if the fonts are uploaded then you’re good to go. To style an element with the new fonts, you can use CSS like this:

p {
    font-family: "Gotham A", "Gotham B";
    font-style: normal;
    font-weight: 400;
}

Hope this helps!

[Jared BParticipant]

Is there an example of all the CSS font elements I need to style? I keep trying to define elements but have only been successful on the paragraph text. Thanks!

[RupokMember]

Hi there,

Thanks for writing back. Do you want to apply this for all elements? In that case you can try :

body {
    font-family: "Gotham A", "Gotham B";
    font-style: normal;
    font-weight: 400;
}

For specific element, add a custom class to the element (say my-class) using the class field and then use CSS like above :

.my-class {
    font-family: "Gotham A", "Gotham B";
    font-style: normal;
    font-weight: 400;
}

Hope this makes sense.

[Jared BParticipant]

It does. What about the font for other items (e.g. navigation, buttons, and X elements like the title in a feature box)?

Thanks for your continued assistance!

[Rue NelModerator]

Hello There,

It seems that you want to apply the font to almost all of the elements in your site. To do that, you can use a custom css like

body {
    font-family: "Gotham A", "Gotham B";
    font-style: normal;
    font-weight: 400;
}

For a more easier way to apply the custom font is to add it in the customizer. Having this way, you will have move control on the font and where you want to use it. You can always visit the customizer, Appearance > Customize > Typography and set the font to the site, heading or other elements. You must have to add your custom font so that it will appear in the typography selection. To be able to do that, please follow a more detailed instruction here: https://community.theme.co/forums/topic/installing-x-2/#post-1033283

Hope this helps.

[Jared BParticipant]

Okay, I’m trying to set this up so I can edit the fonts in the Customizer. That would be awesome. I’ve attached a screenshot of the font weights I’m trying to add.

I added this code to the child theme stylesheet:

@font-face {
  font-family: 'MyWebFont';
  src: url('fonts/474280/0BC906C959274FFD8.eot');
  src: url('fonts/474280/0F5B7310E6B124010.eot');
  src: url('fonts/474280/129912605EB75FE61.eot');
  src: url('fonts/474280/80FEB4A04FD1AF8C9.eot');
  src: url('fonts/474280/99AB4F92C30A71126.eot');
  src: url('fonts/474280/B3C9174875F68256A.eot');
  src: url('fonts/474280/D1E502B8326588D51.eot');
  src: url('fonts/474280/D578BD430209CD110.eot');
  src: url('fonts/474280/E76A12C11E76552D9.eot');
  src: url('fonts/474280/E7C93E2C0A3A0A374.eot');
  src: url('fonts/474280/F934D1E178034AAAB.eot');
  src: url('fonts/474280/FBCA4E2C936B38C8E.eot');
}

And then added this code to the CSS in the Customizer:

// Add custom font name in the customizer's typography section
// =============================================================================
function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'My Web Font',
          'stack'   => '"MyWebFont", sans-serif',
          'weights' => array( '400' )
        );
  return $data;
}
add_filter('x_fonts_data', 'my_custom_font');
// =============================================================================

However, the custom font is not showing up in the Customizer under the typography section. What am I doing wrong?

Thanks!

[LelyModerator]

Hi There,

Please update this code:

// Add custom font name in the customizer's typography section
// =============================================================================
function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'My Web Font',
          'stack'   => '"MyWebFont", sans-serif',
          'weights' => array( '400' )
        );
  return $data;
}

To this:

// Add custom font name in the customizer's typography section
// =============================================================================
function my_custom_font($data){
  $data['mywebfont'] = array(
          'source'  => 'Custom',
          'family'  => 'My Web Font',
          'stack'   => '"MyWebFont", sans-serif',
          'weights' => array( '400' )
        );
 array_push($data, $data['mywebfont']);

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

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Jared BParticipant]

I updated the code but I’m still not seeing the custom font option at the bottom of the font listings 🙁

[RadModerator]

Hi there,

May I see it personally? Please provide us with login credentials so we can take a closer look. To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[Author]

Posts