hellofromtonya/TEST_REPORT.md

## TEST_REPORT.md

      
    Raw
  

              TEST_REPORT.md
            
          
    Test Report

All tests are done the Validator commented out, i.e. no validation.
Testing Environment:
*

Browser: Chrome
Theme: Twenty-Twenty Two (modified to use the Webfonts API)
Webfonts: Local and Google Fonts

Required properties not defined

What happens if the webfonts are registered without required properties?

PHP 5.6 to 7.x: PHP Notice of "Undefined index"
PHP 8.0-8.1: PHP Warning of "Undefined index"
PHP 9.0 (future): PHP Fatal Error

https://3v4l.org/KVWpD
provider invalid string or null

The @font-face is not generated.
font-family

Testing with invalid data type

Local font:

wp_register_webfonts(
  array(
			array(
				'provider'    => 'local',
				'font_family'  => null,
				'font_weight'  => '200 900',
				'font_style'   => 'normal',
				'src'         => get_theme_file_uri( 'assets/fonts/open-sans-condensed/SourceSerif4Variable-Roman.ttf.woff2' ),
			),
			array(
				'provider'    => 'local',
				'font_family'  => null,
				'font_weight'  => '200 900',
				'font_style'   => 'italic',
				'font_stretch' => 'normal',
				'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2' ),
			),
  )
);
Results

Invalid @font-face styles:

<style id="webfonts-inline-css">
@font-face{
	font-weight:200 900;
	font-style:normal;
	src:local(), url('/wp-content/themes/twentytwentytwo/assets/fonts/open-sans-condensed/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');
}

@font-face{
	font-weight:200 900;
	font-style:normal;
	font-stretch:italic;
	src:local("Source Serif Pro"), url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');
}

</style>

Look of the website changes

Remote font like Google Fonts:

add_filter( 'has_remote_webfonts_request_permission', '__return_true' );
wp_register_webfonts(
  array(
			array(
				'provider'    => 'google',
				'font_family'  => null,
				'font_style'   => 'normal',
				'font_weight'  => '200 900',
				'font_display' => 'fallback',
			),
  )
);
Results

Error from the remote font service
@font-face styles not generated
Typography would be default to an alternative, if defined in stylesheet, or browser/system default

font-weight

font-weight documentation
Valid values are: 'normal', 'bold', 'lighter', 'bolder', 100 to 900, or global values of 'inherit', 'initial', 'revert', or 'unset'
Testing with an invalid font-weight value

Using Local Service Provider

Invalid string value

An invalid font-weight that is a string will change how the site looks, but no errors.
Invalid data type

A font-weight that is not a string causes the font-weight to not be included in the @font-face CSS declaration:
registration:
add_filter( 'has_remote_webfonts_request_permission', '__return_true' );
wp_register_webfonts(
  array(
			array(
				'provider'    => 'local',
				'font_family'  => 'Source Serif Pro',
				'font_weight'  => null,
				'font_style'   => 'normal',
				'src'         => get_theme_file_uri( 'assets/fonts/open-sans-condensed/SourceSerif4Variable-Roman.ttf.woff2' ),
			),
			array(
				'provider'    => 'local',
				'font_family'  => 'Source Serif Pro',
				'font_weight'  => null,
				'font_style'   => 'italic',
				'font_stretch' => 'normal',
				'src'         => get_theme_file_uri( 'assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2' ),
			),
  )
);
Resulting CSS in the <head>:
<style id="webfonts-inline-css">
@font-face{
	font-family:"Source Serif Pro";
	font-style:normal;
	src:local("Source Serif Pro"), url('/wp-content/themes/twentytwentytwo/assets/fonts/open-sans-condensed/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');
}

@font-face{
	font-family:"Source Serif Pro";
	font-style:italic;
	font-stretch:normal;
	src:local("Source Serif Pro"), url('/wp-content/themes/twentytwentytwo/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');
}

</style>

Using Google Fonts Service Provider

An invalid font-weight such as invalid causes a 400: Invalid selector error from Google Fonts:
Example:
wp_register_webfont(
  array(
    'provider'    => 'google',
    'font-family' => 'Open Sans',
    'font-style'  => 'normal'
    'font-weight' => 'invalid',
  )
);
Becomes remote request URL: https://fonts.googleapis.com/css2?family=Open+Sans:wght@invalid
Response back from Google Fonts API:
400: Invalid selector

Expected a digit
Open Sans:wght@invalid

Impact on the website

With no validation, the impact on the website will be:

no @font-face will be created
the expected font will not render, changing the look of the website
if an alternative font-family is specified in the stylesheet, the website will render with that font