Theme Hybrid

Theme Fonts

Removed:

This feature was removed in version 2.0.0 of Hybrid Core.

Theme Fonts is an extension that was created to allow theme developers to easily load fonts within their theme. They can even allow users to select fonts if they wish.

Activating Theme Fonts

To activate the Theme Fonts extension, the following line of code must be added to the theme setup function.

add_theme_support( 'theme-fonts' );

There’s also a second parameter of $args, which is an array of possible arguments for setting up the Theme Fonts script.

callback
A callback function used to register fonts and font settings.
customizer
Whether to use the theme customizer to allow theme users to select fonts (you must register font settings for this feature to work). This is set to false by default.

Let’s assume you want to register some fonts and font settings to give the user some choices. This is how the above line of code should now look:

add_theme_support( 
	'theme-fonts',   
	array( 'callback' => 'my_register_fonts', 'customizer' => true ) 
);

You’ll notice the my_register_fonts callback. That’s the name of the function you’ll need to create for registering fonts.

Registering fonts

To register your fonts, you’ll need the callback function my_register_fonts() that you set up in the previous section. This should go within your theme’s functions.php file and look like the following.

function my_register_fonts( $theme_fonts ) {

	/* Custom code will go here. */
}

This function will take in a single parameter of $theme_fonts, which allows you to access the properties and methods of the Theme_Fonts class. In particular, you’ll access the add_setting() and add_font() methods.

$theme_fonts->add_setting()

$theme_fonts->add_setting( $args = array() );

This method is used for setting up a which CSS selectors will use a particular font. It’s also used for the theme customizer (if you enable this option) for allowing users to select a font.

The function takes in a single parameter of $args, which is an array of arguments for the font setting.

id
A unique ID/key to register this font setting.
label
An internationalized label used for this setting in the theme customizer.
default
The font handle to use by default. Must be registered via $theme_fonts->add_font() (see below).
selectors
A comma-separated list of CSS selectors that this font setting will apply to.

If you’re not using the theme customizer option, the default font will simply be applied to the selectors you set.

Let’s suppose you wanted to set up a “headlines” font option, which will allow users to select a font for headers. The code for this would look like the following.

$theme_fonts->add_setting(
	array(
		'id'        => 'headlines',
		'label'     => __( 'Headlines', 'example' ),
		'default'   => 'georgia-stack',
		'selectors' => 'h1, h2, h3, h4, h5, h6
	)
);

You’ll notice that we set the default font to georgia-stack. This is a font handle that must be registered.

$theme_fonts->add_fonts()

$theme_fonts->add_font( $args = array() );

This method is for registering fonts for use with the font settings from the previous section. You can register single fonts for each setting if not using the customizer or multiple fonts for users to select from if using the customizer.

The method takes in a single parameter of $args, which is an array of arguments for registering the font.

family
The CSS name of the font you want to use.
weight
The weight of the font you want to use. Available options are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. The default is 400.
style
The font style you want to use. Available options are normal, italic, and oblique. This defaults to normal.
stack
The font stack to use in the CSS output. A font stack is just a list of fonts to fallback to if the font before it in the list cannot be used for whatever reason.
handle
A unique ID for the font. This is what you use in $theme_fonts->add_setting() as the default argument.
label
An internationalized label used for this font in the theme customizer.
setting
If you wish to limit a font to a single setting, add the setting id here. Not setting this will make the font available for all font settings.
type
If you plan to use a font from Google Web Fonts, you’ll need to set this to google. Defaults to an empty string.
uri
The URI for the font. If the font is packaged with the theme or you’re loading it from somewhere, you’ll need to reference the correct URI. If not, you can simply leave this blank. No need to do this for Google Web Fonts.

Let’s register the georgia-stack we used when adding a font setting above. This font will just be basic fonts that a user will probably have on their computer.

$theme_fonts->add_font(
	array(
		'handle' => 'georgia-stack',
		'label'  => __( 'Georgia (font stack)', 'example' ),
		'stack'  => ' Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
	)
);

Suppose you wanted to get more complex and load a Google Web Font. The following code will register the “Muli” font from that service.

$theme_fonts->add_font(
	array(
		'handle' => 'muli',
		'label'  => __( 'Muli', 'chun' ),
		'family' => 'Muli',
		'stack'  => "Muli, sans-serif",
		'type'   => 'google'
	)
);

Putting it all together

Now that you’ve seen the individual components, here’s how all the code will look when put together.

function my_register_fonts( $theme_fonts ) {

	/* Register font settings. */

	$theme_fonts->add_setting(
		array(
			'id'        => 'headlines',
			'label'     => __( 'Headlines', 'example' ),
			'default'   => 'georgia-stack',
			'selectors' => 'h1, h2, h3, h4, h5, h6
		)
	);

	/* Register fonts. */

	$theme_fonts->add_font(
		array(
			'handle' => 'georgia-stack',
			'label'  => __( 'Georgia (font stack)', 'example' ),
			'stack'  => ' Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
		)
	);

	$theme_fonts->add_font(
		array(
			'handle' => 'muli',
			'label'  => __( 'Muli', 'chun' ),
			'family' => 'Muli',
			'stack'  => "Muli, sans-serif",
			'type'   => 'google'
		)
	);
}