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!

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.

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?

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. 🙂

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 🙂

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.

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

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.

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.