Adding and Using Fonts with WordPress

Adding additional fonts to any website can enhance and help better communicate the content that is being presented to visitors. There are several ways to add additional fonts, especially Google Fonts, to a WordPress website. We will look at the options available to WordPress site owners and how to start using these fonts immediately.

Webinar Originally Broadcast: July 27, 2024

Video Download: HD Download | Mobile Download

Additional Downloads: PDF Handout

Additional Notes:

Code Snippet

function custom_enqueue_fonts_url() {
  $fonts_url = '';
  $lora = _x( 'on', 'Lora font: on or off', 'voce' );
  $open_sans = _x( 'on', 'Open Sans font: on or off', 'voce' );
  if ( 'off' !== $lora || 'off' !== $open_sans ){
    $font_families = array();
    if ( 'off' !== $lora ){
      $font_families[] = 'Lora:400,700,400italic';
    }
    if ( 'off' !== $open_sans ){
      $font_families[] = 'Open Sans:700italic,400,800,600';
    }
  }
  $query_args = array(
    'family' => urlencode( implode( '|', $font_families ) ),
    'subset' => urlencode( 'latin,latin-ext' ),
  );
  $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  return esc_url_raw($fonts_url);
}

… and then the enqueuing of the function…

function custom_enqueue_scripts_styles() {
  wp_enqueue_style( 'theme_custom_fonts', custom_enqueue_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_styles' );