0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Archeo: Add fonts to theme.json (#5609)

Browse source 
* Archeo: Add fonts to theme.json

* Add archeo_preload_webfonts function back in

* Also replace the fonts in Stewart

* Use theme.json fonts for Livro

* Add fonts for Remote to theme.json

* Remove preload fuctions and use  on the font files

Co-authored-by: Sarah Norris <sarah@sekai.co.uk>
This commit is contained in:
Ben Dwyer 2022-03-17 18:03:07 +00:00 committed by GitHub
parent 3bba9aeffc
commit 38d6bc4dcf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 141 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
archeo/functions.php
View file

@ -51,9 +51,6 @@ if ( ! function_exists( 'archeo_styles' ) ) :
wp_get_theme()->get( 'Version' )
);
// Add styles inline.
wp_add_inline_style( 'archeo-style', archeo_get_font_face_styles() );
// Enqueue theme stylesheet.
wp_enqueue_style( 'archeo-style' );
@ -63,119 +60,5 @@ endif;
add_action( 'wp_enqueue_scripts', 'archeo_styles' );
if ( ! function_exists( 'archeo_editor_styles' ) ) :
/**
* Enqueue editor styles.
*
* @since Archeo 1.0
*
* @return void
*/
function archeo_editor_styles() {
// Add styles inline.
wp_add_inline_style( 'wp-block-library', archeo_get_font_face_styles() );
}
endif;
add_action( 'admin_init', 'archeo_editor_styles' );
if ( ! function_exists( 'archeo_get_font_face_styles' ) ) :
/**
* Get font face styles.
* Called by functions archeo_styles() and archeo_editor_styles() above.
*
* @since Archeo 1.0
*
* @return string
*/
function archeo_get_font_face_styles() {
return "
@font-face{
font-family: 'Chivo';
font-weight: 100;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Thin.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Chivo';
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Regular.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Chivo';
font-weight: 700;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Bold.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Chivo';
font-weight: 100;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-ThinItalic.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Chivo';
font-weight: 400;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-Italic.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Chivo';
font-weight: 700;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Chivo-BoldItalic.woff2' ) . "') format('woff2');
}
";
}
endif;
if ( ! function_exists( 'archeo_preload_webfonts' ) ) :
/**
* Preloads the main web font to improve performance.
*
* Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant.
* The other fonts are only needed if the user changed style or weight of the fonts,
* and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
* at all.
*
* @since Archeo 1.0
*
* @return void
*/
function archeo_preload_webfonts() {
?>
<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Chivo-Thin.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Chivo-Regular.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
<?php
}
endif;
add_action( 'wp_head', 'archeo_preload_webfonts' );
// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

52
archeo/theme.json
View file

@ -64,7 +64,57 @@
{
"fontFamily": "\"Chivo\", sans-serif",
"name": "Chivo",
"slug": "chivo"
"slug": "chivo",
"fontFace": [
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "100",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-Thin.woff2" ]
},
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-Regular.woff2" ]
},
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-Bold.woff2" ]
},
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "100",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-ThinItalic.woff2" ]
},
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-Italic.woff2" ]
},
{
"fontFamily": "Chivo",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Chivo-BoldItalic.woff2" ]
}
]
}
],
"fontSizes": [

84
livro/functions.php
View file

@ -51,100 +51,16 @@ if ( ! function_exists( 'livro_styles' ) ) :
wp_get_theme()->get( 'Version' )
);
// Add styles inline.
wp_add_inline_style( 'livro-style', livro_get_font_face_styles() );
// Enqueue theme stylesheet.
wp_enqueue_style( 'livro-style' );
}
endif;
add_action( 'wp_enqueue_scripts', 'livro_styles' );
if ( ! function_exists( 'livro_editor_styles' ) ) :
/**
* Enqueue editor styles.
*
* @since Livro 1.0
*
* @return void
*/
function livro_editor_styles() {
// Add styles inline.
wp_add_inline_style( 'wp-block-library', livro_get_font_face_styles() );
}
endif;
add_action( 'admin_init', 'livro_editor_styles' );
if ( ! function_exists( 'livro_get_font_face_styles' ) ) :
/**
* Get font face styles.
* Called by functions livro_styles() and livro_editor_styles() above.
*
* @since Livro 1.0
*
* @return string
*/
function livro_get_font_face_styles() {
return "
@font-face{
font-family: 'Newsreader';
font-weight: 200 800;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Newsreader.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'Newsreader';
font-weight: 200 800;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/Newsreader-italic.woff2' ) . "') format('woff2');
}
";
}
endif;
if ( ! function_exists( 'livro_preload_webfonts' ) ) :
/**
* Preloads the main web font to improve performance.
*
* Only the main web font (font-style: normal) is preloaded here since that font is always relevant (it is used
* on every heading, for example). The other font is only needed if there is any applicable content in italic style,
* and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
* at all.
*
* @since Livro 1.0
*
* @return void
*/
function livro_preload_webfonts() {
?>
<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Newsreader.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/Newsreader-italic.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
<?php
}
endif;
add_action( 'wp_head', 'livro_preload_webfonts' );
// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

20
livro/theme.json
View file

@ -80,7 +80,25 @@
{
"fontFamily": "\"Newsreader\", serif",
"name": "Newsreader",
"slug": "Newsreader"
"slug": "Newsreader",
"fontFace": [
{
"fontFamily": "Newsreader",
"fontDisplay": "block",
"fontWeight": "200 800",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Newsreader.woff2" ]
},
{
"fontFamily": "Newsreader",
"fontDisplay": "block",
"fontWeight": "200 800",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/Newsreader-italic.woff2" ]
}
]
}
],
"fontSizes": [

99
remote/functions.php
View file

@ -51,9 +51,6 @@ if ( ! function_exists( 'remote_styles' ) ) :
wp_get_theme()->get( 'Version' )
);
// Add styles inline.
wp_add_inline_style( 'remote-style', remote_get_font_face_styles() );
// Enqueue theme stylesheet.
wp_enqueue_style( 'remote-style' );
@ -63,102 +60,6 @@ endif;
add_action( 'wp_enqueue_scripts', 'remote_styles' );
if ( ! function_exists( 'remote_editor_styles' ) ) :
/**
* Enqueue editor styles.
*
* @since Remote 1.0
*
* @return void
*/
function remote_editor_styles() {
// Add styles inline.
wp_add_inline_style( 'wp-block-library', remote_get_font_face_styles() );
}
endif;
add_action( 'admin_init', 'remote_editor_styles' );
if ( ! function_exists( 'remote_get_font_face_styles' ) ) :
/**
* Get font face styles.
* Called by functions remote_styles() and remote_editor_styles() above.
*
* @since Remote 1.0
*
* @return string
*/
function remote_get_font_face_styles() {
return "
@font-face{
font-family: 'DM Sans';
font-weight: 400;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Regular.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'DM Sans';
font-weight: 700;
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Bold.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'DM Sans';
font-weight: 400;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-Italic.woff2' ) . "') format('woff2');
}
@font-face{
font-family: 'DM Sans';
font-weight: 700;
font-style: italic;
font-stretch: normal;
font-display: swap;
src: url('" . get_theme_file_uri( 'assets/fonts/DMSans-BoldItalic.woff2' ) . "') format('woff2');
}
";
}
endif;
if ( ! function_exists( 'remote_preload_webfonts' ) ) :
/**
* Preloads the main web font to improve performance.
*
* Only the main web font (font-weight: 100,400, font-style: normal) is preloaded here since that font is always relevant.
* The other fonts are only needed if the user changed style or weight of the fonts,
* and therefore preloading it would in most cases regress performance when that font would otherwise not be loaded
* at all.
*
* @since Remote 1.0
*
* @return void
*/
function remote_preload_webfonts() {
?>
<link rel="preload" href="<?php echo esc_url( get_theme_file_uri( 'assets/fonts/DMSans-Regular.woff2' ) ); ?>" as="font" type="font/woff2" crossorigin>
<?php
}
endif;
add_action( 'wp_head', 'remote_preload_webfonts' );
/**
* Block Patterns.
*/

36
remote/theme.json
View file

@ -54,7 +54,41 @@
{
"fontFamily": "\"DM Sans\", sans-serif",
"slug": "dm-sans",
"name": "Body (DM Sans)"
"name": "Body (DM Sans)",
"fontFace": [
{
"fontFamily": "DM Sans",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/DMSans-Regular.woff2" ]
},
{
"fontFamily": "DM Sans",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/DMSans-Bold.woff2" ]
},
{
"fontFamily": "DM Sans",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/DMSans-Italic.woff2" ]
},
{
"fontFamily": "DM Sans",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/DMSans-BoldItalic.woff2" ]
}
]
}
],
"fontSizes": [

BIN
stewart/assets/fonts/WorkSans-Italic-VariableFont_wght.ttf Normal file
View file

Binary file not shown.

BIN
stewart/assets/fonts/WorkSans-VariableFont_wght.ttf Normal file
View file

Binary file not shown.

42
stewart/functions.php
View file

@ -7,14 +7,6 @@ function stewart_support() {
// Add support for block styles.
add_theme_support( 'wp-block-styles' );
// Enqueue editor styles.
add_editor_style(
array(
stewart_fonts_url(),
'style.css',
)
);
}
add_action( 'after_setup_theme', 'stewart_support' );
@ -34,42 +26,8 @@ function stewart_styles() {
// Enqueue theme stylesheet.
wp_enqueue_style( 'stewart-style' );
// Enqueue Google fonts
wp_enqueue_style( 'seedlet-fonts', stewart_fonts_url(), array(), null );
}
add_action( 'wp_enqueue_scripts', 'stewart_styles' );
/**
* Add Google webfonts, if necessary
*
* - See: http://themeshaper.com/2014/08/13/how-to-add-google-fonts-to-wordpress-themes/
*/
function stewart_fonts_url() {
$fonts_url = '';
/* Translators: If there are characters in your language that are not
* supported by Work Sans, translate this to 'off'. Do not translate
* into your own language.
*/
$work_sans = esc_html_x( 'on', 'Work Sans: on or off', 'stewart' );
if ( 'off' !== $work_sans ) {
$font_families = 'Work+Sans:ital,wght@0,400;0,700;1,400;1,700';
$query_args = array(
'family' => $font_families,
'subset' => 'latin,latin-ext',
);
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}
// Add block patterns
require get_template_directory() . '/inc/block-patterns.php';

38
stewart/theme.json
View file

@ -119,7 +119,41 @@
{
"fontFamily": "'Work Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Helvetica', sans-serif",
"slug": "work-sans",
"name": "Work Sans"
"name": "Work Sans",
"fontFace": [
{
"fontFamily": "Work Sans",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/WorkSans-VariableFont_wght.ttf" ]
},
{
"fontFamily": "Work Sans",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/WorkSans-VariableFont_wght.ttf" ]
},
{
"fontFamily": "Work Sans",
"fontDisplay": "block",
"fontWeight": "400",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/WorkSans-Italic-VariableFont_wght.ttf" ]
},
{
"fontFamily": "Work Sans",
"fontDisplay": "block",
"fontWeight": "700",
"fontStyle": "italic",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/WorkSans-Italic-VariableFont_wght.ttf" ]
}
]
}
],
"fontSizes": [
@ -351,4 +385,4 @@
"fontSize": "var(--wp--preset--font-size--normal)"
}
}
}
}