Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Archeo: Add fonts to theme.json #5609

Merged
merged 6 commits into from
Mar 17, 2022
Merged

Archeo: Add fonts to theme.json #5609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b87971c
Archeo: Add fonts to theme.json
scruffian Mar 2, 2022
e4f1e00
Add archeo_preload_webfonts function back in
mikachan Mar 7, 2022
8a6426e
Also replace the fonts in Stewart
scruffian Mar 11, 2022
a49e5f6
Use theme.json fonts for Livro
scruffian Mar 11, 2022
aa9a25a
Add fonts for Remote to theme.json
scruffian Mar 11, 2022
40b1a96
Remove preload fuctions and use on the font files
scruffian Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 0 additions & 117 deletions archeo/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,6 @@ function 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' );

Expand All @@ -63,119 +60,5 @@ function archeo_styles() {

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() {
mikachan marked this conversation as resolved.
Show resolved Hide resolved
?>
<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 changes: 51 additions & 1 deletion archeo/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
84 changes: 0 additions & 84 deletions livro/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,100 +51,16 @@ function 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 changes: 19 additions & 1 deletion livro/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
Loading