Skip to content

Adding Font Family

Jump to bottom
Henner R Setyono edited this page Apr 4, 2020 · 1 revision

Specify it in theme support like below:

add_action( 'after_setup_theme', function() {
  if( class_exists( 'Custy' ) ) {
    $font_dir = get_stylesheet_directory_uri() . '/assets/fonts';

    add_theme_support( 'custy-fonts', [
      'Roboto' => [
        '400' => $font_dir . '/roboto-regular.woff',
        '400i' => $font_dir . '/roboto-italic.woff',
        '700' => $font_dir . '/roboto-bold.woff',
      ],
      'Miriam Libre' => [
        '300' => $font_dir . '/miriam-libre-regular.woff',
        '700' => $font_dir . '/miriam-libre-bold.woff',
      ],
    ] );
  }
} );

It will automagically do these:

  • Echo @font-face declaration in frontend's <head>.
  • Echo @font-face declaration in block editor's <head> and some styling to override its default font family.
  • Append the font into the dropdown of Customizer's typography field.

Where to apply the code above?

Learn more:

Clone this wiki locally