[jimahylandParticipant]

Hi there. Thanks for the great work on developing this framework.

Out of thousands of brilliant things, there’s just one thing so far that I think is a bit of an oversight. It seems regardless of where I have Enable Custom Fonts on or off, the font Lato always gets loaded. If I what to use plain old web fonts like Helvetica, I still am getting Lato loaded into the DOM.

Is there anyway of avoiding this? I’m trying to set up with a Child Theme.

Thanks!

[DarshanaModerator]

Hi there,

You can override the default font styles using your Child Theme. Just use the below code, place it into the Child Theme’s “style.css” file.

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

Hope that helps.

[jimahylandParticipant]

Thanks for your reply. I put in your css and it did change some of the fonts, but not all. After a quick go it seems that this seems to remove all reference to Lato:

body,
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
blockquote,
input,button,select,textarea,
.widget_calendar #wp-calendar th,
.widget_calendar #wp-calendar #prev,.widget_calendar #wp-calendar #next {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
}

or slightly less complicated:

* {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif !important;
}

although I would prefer to not use !important on such a global level.

Is there any other way to do this?

[ChristianModerator]

Hey Jim,

Please try adding the code below in your functions.php.

function x_enqueue_site_styles() {

    //
    // Stack data.
    //

    $stack  = x_get_stack();
    $design = x_get_option( 'x_integrity_design', 'light' );

    if ( $stack == 'integrity' && $design == 'light' ) {
      $ext = '-light';
    } elseif ( $stack == 'integrity' && $design == 'dark' ) {
      $ext = '-dark';
    } else {
      $ext = '';
    }

    //
    // Font data.
    //

    $body_font_family_query         = x_get_font_family_query( x_get_option( 'x_body_font_family', 'Lato' ) );
    $body_font_weight_and_style     = x_get_option( 'x_body_font_weight', '400' );
    $body_font_weight               = x_get_font_weight( $body_font_weight_and_style );

    $headings_font_family_query     = x_get_font_family_query( x_get_option( 'x_headings_font_family', 'Lato' ) );
    $headings_font_weight_and_style = x_get_option( 'x_headings_font_weight', '400' );
    $headings_font_weight           = x_get_font_weight( $headings_font_weight_and_style );

    $logo_font_family_query         = x_get_font_family_query( x_get_option( 'x_logo_font_family', 'Lato' ) );
    $logo_font_weight_and_style     = x_get_option( 'x_logo_font_weight', '400' );
    $logo_font_weight               = x_get_font_weight( $logo_font_weight_and_style );

    $navbar_font_family_query       = x_get_font_family_query( x_get_option( 'x_navbar_font_family', 'Lato' ) );
    $navbar_font_weight_and_style   = x_get_option( 'x_navbar_font_weight', '400' );
    $navbar_font_weight             = x_get_font_weight( $navbar_font_weight_and_style );

    $subsets                        = 'latin,latin-ext';

    if ( x_get_option( 'x_custom_font_subsets', 0 ) == 1 ) {
      if ( x_get_option( 'x_custom_font_subset_cyrillic', 0 ) == 1   ) { $subsets .= ',cyrillic,cyrillic-ext'; }
      if ( x_get_option( 'x_custom_font_subset_greek', 0 ) == 1      ) { $subsets .= ',greek,greek-ext'; }
      if ( x_get_option( 'x_custom_font_subset_vietnamese', 0 ) == 1 ) { $subsets .= ',vietnamese'; }
    }

    $custom_font_args   = array(
      'family' => $body_font_family_query . ':' . $body_font_weight . ',' . $body_font_weight . 'italic,700,700italic|' . $navbar_font_family_query . ':' . $navbar_font_weight_and_style . '|' . $headings_font_family_query . ':' . $headings_font_weight_and_style . '|' . $logo_font_family_query . ':' . $logo_font_weight_and_style,
      'subset' => $subsets
    );

    $standard_font_args = array(
      'family' => 'Lato:' . $body_font_weight . ',' . $body_font_weight . 'italic,' . $navbar_font_weight_and_style . ',' . $headings_font_weight_and_style . ',' . $logo_font_weight_and_style . ',700,700italic',
      'subset' => $subsets
    );

    $get_custom_font_family   = add_query_arg( $custom_font_args,   '//fonts.googleapis.com/css' );
    $get_standard_font_family = add_query_arg( $standard_font_args, '//fonts.googleapis.com/css' );

    //
    // Enqueue styles.
    //

    if ( is_child_theme() ) {
      wp_enqueue_style( 'x-stack', get_stylesheet_directory_uri() . '/style.css', NULL, NULL, 'all' );
    } else {
      wp_enqueue_style( 'x-stack', get_stylesheet_directory_uri() . '/framework/css/site/stacks/' . $stack . $ext . '.css', NULL, NULL, 'all' );
    }

    if ( is_rtl() ) {
      wp_enqueue_style( 'x-rtl', X_TEMPLATE_URL . '/framework/css/site/rtl/' . $stack . '.css', NULL, NULL, 'all' );
    }

    if ( X_BBPRESS_IS_ACTIVE ) {
      if ( x_is_bbpress() ) {
        wp_deregister_style( 'buttons' );
      }
      wp_deregister_style( 'bbp-default' );
      wp_enqueue_style( 'x-bbpress', X_TEMPLATE_URL . '/framework/css/site/bbpress/' . $stack . $ext . '.css', NULL, NULL, 'all' );
    }

    if ( X_BUDDYPRESS_IS_ACTIVE ) {
      wp_deregister_style( 'bp-legacy-css' );
      wp_deregister_style( 'bp-admin-bar' );
      wp_enqueue_style( 'x-buddypress', X_TEMPLATE_URL . '/framework/css/site/buddypress/' . $stack . $ext . '.css', NULL, NULL, 'all' );
    }

    if ( X_WOOCOMMERCE_IS_ACTIVE ) {
      wp_deregister_style( 'woocommerce-layout' );
      wp_deregister_style( 'woocommerce-general' );
      wp_deregister_style( 'woocommerce-smallscreen' );
      wp_enqueue_style( 'x-woocommerce', X_TEMPLATE_URL . '/framework/css/site/woocommerce/' . $stack . $ext . '.css', NULL, NULL, 'all' );
    }

    if ( X_GRAVITY_FORMS_IS_ACTIVE ) {
      wp_enqueue_style( 'x-gravity-forms', X_TEMPLATE_URL . '/framework/css/site/gravity_forms/' . $stack . $ext . '.css', NULL, NULL, 'all' );
    }

    if ( X_CONTACT_FORM_7_IS_ACTIVE ) {
      wp_deregister_style( 'contact-form-7' );
    }

    $get_standard_font_family = "";

    if ( x_get_option( 'x_custom_fonts', 0 ) == 1 ) {
      wp_enqueue_style( 'x-font-custom', $get_custom_font_family, NULL, NULL, 'all' );
    } else {
      wp_enqueue_style( 'x-font-standard', $get_standard_font_family, NULL, NULL, 'all' );
    }

}

It is the X enqueue style function which outputs the Lato font as the default. I’ve set $get_standard_font_family to an empty string before it is called so Lato won’t get called. Please ensure you’ve disabled Custom Fonts in your Typography setting. After implementing this, the default will fall back to “Helvetica Neue” so you won’t need changing the CSS.

Hope that helps. 🙂

[jimahylandParticipant]

That works perfectly. Thanks!

For future reference, I can’t see how this approach will be able to specify anything other than Helvetica Neue.

Not sure if this is planned, or not so easy to implement but from my point of view it would be nice to have a Customizer way of specifying non-google fonts.

For anyone else wanting to do something similar my global * {} approach is not such a great idea as it gets rid of the font icons that are used all over the theme.

Thanks again. Great theme, great support 🙂

[ChristianModerator]

Hey Jim,

You’re welcome and thanks for your feedback. We’ll take note of that as feature request and might implement it in a future release.

Thanks.

[LiquidatorParticipant]

Hey there!

I added both CSS to style.css (child’s) and implemented that code into my functions.php. However, Lato still appears on page and there’s no Helvetica at all:
http://awesomescreenshot.com/0443m4ma96

Any fix on it?

Thank you

[Nabeel AModerator]

Hi there,

You can change font through Appearance > Customize > Typography. You’ll need to “Enable Custom Fonts” checkbox. If it’s already checked. Uncheck the box and recheck it then choose the font of your choice. Make sure you save and publish the changes.

[LiquidatorParticipant]

Well, i did uncheck that value. No result.

[Paul RModerator]

Hi,

We need you to provide us with your URL to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[LiquidatorParticipant]

miamiwatch.company

[RubinKeymaster]

Hey There,

I recommend using a child theme for these changes but you also can do it in the theme files. Go to: /x/framework/functions/global/enqueue/styles.php and in that file to line 128 and delete the whole line. Then there only should be left this:

  if ( x_get_option( 'x_custom_fonts', '' ) == '1' ) {
      wp_enqueue_style( 'x-font-custom', $get_custom_font_family, NULL, NULL, 'all' );
  } else {
      
  }

and the Lato font should not be included anymore.

Let me know if that did the trick.

[jbellseyParticipant]

Hi all – here’s another way to remove Lato from your child theme. This code goes in your own functions.php, and requires no changes to the parent (X) theme.

function remove_site_styles () {
    wp_dequeue_style( 'x-font-custom' );     // this line may not be necessary for all child themes
    wp_dequeue_style( 'x-font-standard' );
}
add_action( 'wp_enqueue_scripts', 'remove_site_styles', 11 );

This will prevent X from installing Lato. Use with caution, obviously; you’re now completely in charge of ensuring that your child theme loads its own font files.

[Paul RModerator]

Thanks for sharing @jbellsey.

Have a nice day!

[Bart971Participant]

Thanks again @jbellsey! I was trying to find a solution to remove google font without extra plugin 🙂 Your code works perfectly and my site speed increased!

Best Regards!

[Author]

Posts