Due to privacy concerns, the themes from Twenty Twelve to Twenty Seventeen will not fetch their fonts from Google addresses, starting with the next version.
| Twenty Twelve | 3.9 |
| Twenty Thirteen | 3.8 |
| Twenty Fourteen | 3.6 |
| Twenty Fifteen | 3.4 |
| Twenty Sixteen | 2.9 |
| Twenty Seventeen | 3.2 |
Each theme would serve a new stylesheet from the theme directory, under the site’s domain. With multiple fonts, Twenty Thirteen creates a reference like this:
<link rel='stylesheet' id='twentythirteen-fonts-css' href='https://example.com/wp-content/themes/twentythirteen/fonts/source-sans-pro-plus-bitter.css?ver=20230328' media='all' />
If you have edited or removed the font stylesheet in a child theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. or plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, please verify that your site will work properly with this change.
Language support
When a language has disabled certain custom fonts, the stylesheet should continue to respect that setting.
Google Fonts had offered all character sets, ignoring any specified in the URL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, so the new styles for all six themes likewise gather the font files for any character sets. Modern browsers select only the sets they need for the page.
Developers may still choose only certain character subsets, either to create a reduced stylesheet or to use in a preload resource hint. Creating an array of language codes could help, mapping them to their script families.
Fixing the editor style within a custom theme-setup function
Twenty Fourteen, Twenty Fifteen and Twenty Sixteen have allowed custom overrides to their setup functions in a child theme.
twentyfourteen_setup()twentyfifteen_setup()twentysixteen_setup()
For the block Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor, the new font stylesheet URL needs to be relative in the add_editor_style() function, or else it would try fetching fonts from a nonexistent wp-admin URL. If a child theme replaces the setup function, it should remove the theme directory before including the fonts in the editor style array. Twenty Fourteen has this (arranged in fewer lines):
$font_stylesheet = str_replace(
array(
get_template_directory_uri() . '/',
get_stylesheet_directory_uri() . '/'
),
'',
twentyfourteen_font_url()
);
add_editor_style(
array(
'css/editor-style.css',
$font_stylesheet,
'genericons/genericons.css'
)
);
Removing the font stylesheet
Twenty Fifteen and Twenty Sixteen have allowed replacing the font stylesheet since their debut, and the upcoming versions of the other four themes will enable the same. (Previous versions of those four would cause an error by declaring the function twice.)
To remove the font stylesheet and use system fonts, you could return an empty string in the child theme’s functions.php.
function twentyfifteen_fonts_url() {
return '';
}
To protect against errors in older versions of Twenty Twelve, Twenty Thirteen, Twenty Fourteen or Twenty Seventeen, the child theme could establish a minimum version for the parent theme before declaring the function.
if ( version_compare( wp_get_theme( 'twentythirteen' )->get( 'Version' ), '3.8', '>=' ) ) {
function twentythirteen_fonts_url() {
return '';
}
}
Including a custom set of fonts in the child theme
A child theme could include a different set of fonts and its own stylesheet. For example, a site that needs additional weights and styles for Montserrat—but does not use Twenty Sixteen’s other fonts—could have this in its functions.php:
function twentysixteen_fonts_url() {
return get_stylesheet_directory_uri() . '/fonts/montserrat-all.css';
}
Classic Editor would require special considerations for the new URL:
- The above example uses
'/fonts/montserrat-all.css' because Twenty Sixteen has '/fonts/montserrat.css' in its directory. If the child theme’s filename and directory match a stylesheet in the parent theme, the editor would fetch both stylesheets. Child themes that already have a font stylesheet with the same name and directory could use the mce_css filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. to remove the extra file.
- If the child theme font URL includes a version query string, whether hardcoding
ver=1.0 or using add_query_arg(), Classic Editor would ignore the entire stylesheet. If the version is important on the front end, the function could add the parameter only when it is not an administration page.
Child themes also could build similar stylesheets to override choices in the parent font stylesheet. If you want to extend the time limit for fonts to load and replace system fonts, you could change the font-display property to swap and refer to the parent theme’s font files within your theme’s stylesheet.
/* montserrat-latin-400-normal */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-display: swap;
font-weight: 400;
/* Go up two levels if this stylesheet is at '/fonts/montserrat-all.css' in the child theme. */
src:
url('../../twentysixteen/fonts/montserrat/montserrat-latin-400-normal.woff2?ver=25') format('woff2'),
url('../../twentysixteen/fonts/montserrat/montserrat-all-400-normal.woff?ver=25') format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Adjusting the query string
If you amended parameters in the Google Fonts URL with add_query_arg or remove_query_arg, those adjustments would not have the desired effect anymore.
Without a child theme, the default stylesheet can be replaced within a plugin:
function wpdocs_replace_twentyseventeen_font_stylesheet( $src, $handle ) {
if ( 'twentyseventeen-fonts' === $handle ) {
$src = plugins_url( '/css/new-font.css', __FILE__ );
}
return $src;
}
add_filter( 'style_loader_src', 'wpdocs_replace_twentyseventeen_font_stylesheet', 10, 2 );
// Adjust for Classic Editor, too.
function wpdocs_replace_twentyseventeen_font_for_classic_editor( $mce_css ) {
if ( ! empty( twentyseventeen_fonts_url() ) ) {
$mce_css = str_replace(
twentyseventeen_fonts_url(),
plugins_url( '/css/new-font.css', __FILE__ ),
$mce_css
);
}
return $mce_css;
}
add_filter( 'mce_css', 'wpdocs_replace_twentyseventeen_font_for_classic_editor', 11 );
Continuing to use Google Fonts
If you created a custom Google Fonts URL and you do not need to change it to meet privacy laws, you may want to restore the preconnect resource hint filter. A PHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher comment disables it, but either a child theme or a plugin can add the filter again. Each theme has its own filter callback name:
add_filter( 'wp_resource_hints', 'twentytwelve_resource_hints', 10, 2 );
For more information, please see ticket Created for both bug reports and feature development on the bug tracker. #55985.
Props to @audrasjb for help with the title, @milana_cap for formatting help, @bph for review.
#6-2, #bundled-theme, #core-privacy, #core-themes, #dev-notes, #dev-notes-6-2
