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 is400
. style
- The font style you want to use. Available options are
normal
,italic
, andoblique
. This defaults tonormal
. 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 thedefault
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'
)
);
}