Split up font definitions

This commit is contained in:
Tetrakern 2024-02-07 03:05:05 +01:00
parent ddfd61cb34
commit 14a3a6a373
6 changed files with 374 additions and 26 deletions

1
css/fonts-base.css Normal file

File diff suppressed because one or more lines are too long

1
css/fonts-full.css Normal file

File diff suppressed because one or more lines are too long

View File

@ -1008,7 +1008,7 @@ add_filter( 'autoptimize_filter_js_replacetag', 'fictioneer_replace_ao_insert_po
*/
function fictioneer_ao_exclude_css( $exclude ) {
return $exclude . ', fonts.css, bundled-fonts.css';
return $exclude . ', fonts-base.css, fonts-full.css, bundled-fonts.css';
}
add_filter( 'autoptimize_filter_css_exclude', 'fictioneer_ao_exclude_css', 10, 1 );
@ -1045,12 +1045,10 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
* Output HTML <head> meta
*
* @since 5.0.0
* @since 5.10.0 - Refactor for bundled font stylesheet.
*/
function fictioneer_output_head_meta() {
// Setup
$base_fonts_href = get_template_directory_uri() . '/css/fonts.css?ver=' . FICTIONEER_VERSION;
// Start HTML ---> ?>
<meta charset="<?php echo get_bloginfo( 'charset' ); ?>">
<meta http-equiv="content-type" content="text/html">
@ -1060,11 +1058,9 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
<meta name="theme-color" content="<?php echo '#' . get_background_color(); ?>">
<meta name="referrer" content="strict-origin-when-cross-origin">
<?php fictioneer_output_critical_fonts(); ?>
<link rel="stylesheet" href="<?php echo $base_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
<noscript><link rel="stylesheet" href="<?php echo $base_fonts_href; ?>"></noscript>
<?php // <--- End HTML
// Custom fonts
// Bundled fonts
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
// Create file if it does not exist
@ -1072,15 +1068,26 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
fictioneer_build_bundled_fonts();
}
// Output font stylesheets...
if ( file_exists( $bundled_fonts ) ) {
$custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css';
// ... base and custom
$base_fonts_href = get_template_directory_uri() . '/css/fonts-base.css?ver=' . FICTIONEER_VERSION;
$custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css?ver=' . FICTIONEER_VERSION;
// Start HTML ---> ?>
<link rel="stylesheet" href="<?php echo $base_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
<noscript><link rel="stylesheet" href="<?php echo $base_fonts_href; ?>"></noscript>
<link rel="stylesheet" id="bundled-fonts-stylesheet" href="<?php echo $custom_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
<noscript><link rel="stylesheet" href="<?php echo $custom_fonts_href; ?>"></noscript>
<?php // <--- End HTML
} else {
// TODO
// ... all theme fonts if something goes wrong
$full_fonts_href = get_template_directory_uri() . '/css/fonts-full.css?ver=' . FICTIONEER_VERSION;
// Start HTML ---> ?>
<link rel="stylesheet" href="<?php echo $full_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
<noscript><link rel="stylesheet" href="<?php echo $full_fonts_href; ?>"></noscript>
<?php // <--- End HTML
}
}
}

View File

@ -2727,7 +2727,7 @@ function fictioneer_append_meta_fields( $post_type, $meta_key, $meta_value ) {
/**
* Returns fonts included by the theme
*
* @since 5.9.4
* @since 5.10.0
*
* @return array Array of font information.
*/
@ -2772,6 +2772,12 @@ function fictioneer_get_font_data() {
// BUILD BUNDLED FONT CSS FILE
// =============================================================================
/**
* Build bundled font stylesheet
*
* @since 5.10.0
*/
function fictioneer_build_bundled_fonts() {
// Setup
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';

333
src/scss/fonts-base.scss Normal file
View File

@ -0,0 +1,333 @@
/*
* Fonts loaded from the theme directory to avoid privacy issues
* that might come up with the Google Fonts API.
*
* @note This file must be ignored by Autoptimize!
* @link https://gwfh.mranftl.com/fonts
*/
// =============================================================================
// OPEN SANS (cyrillic, cyrillic-ext, greek, greek-ext, hebrew, latin, latin-ext, vietnamese)
// =============================================================================
// Cyrillic
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/cyrillic-regular.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
// Cyrillic
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/cyrillic-italic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
// Cyrillic Ext.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/cyrillic-ext-regular.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
// Cyrillic Ext.
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/cyrillic-ext-italic.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
// Greek
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/greek-regular.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
// Greek
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/greek-italic.woff2') format('woff2');
unicode-range: U+0370-03FF;
}
// Greek Ext.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/greek-ext-regular.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
// Greek Ext.
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/greek-ext-italic.woff2') format('woff2');
unicode-range: U+1F00-1FFF;
}
// Hebrew
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/hebrew-regular.woff2') format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
// Hebrew
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/hebrew-italic.woff2') format('woff2');
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
// Vietnamese
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/vietnamese-regular.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
// Vietnamese
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/vietnamese-italic.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
// Latin Ext.
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/latin-ext-regular.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
// Latin Ext.
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/latin-ext-italic.woff2') format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
// Latin
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/latin-regular.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
// Latin
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 325;
font-display: swap;
src: url('../fonts/open-sans/latin-italic.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src:
local('OpenSans-Light'),
url('../fonts/open-sans/open-sans-v40-300.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 300;
src:
local('OpenSans-LightItalic'),
url('../fonts/open-sans/open-sans-v40-300italic.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src:
local('OpenSans-Regular'),
url('../fonts/open-sans/open-sans-v40-regular.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src:
local('OpenSans-Italic'),
url('../fonts/open-sans/open-sans-v40-italic.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src:
local('OpenSans-Medium'),
url('../fonts/open-sans/open-sans-v40-500.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 500;
src:
local('OpenSans-MediumItalic'),
url('../fonts/open-sans/open-sans-v40-500italic.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src:
local('OpenSans-SemiBold'),
url('../fonts/open-sans/open-sans-v40-600.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 600;
src:
local('OpenSans-SemiBoldItalic'),
url('../fonts/open-sans/open-sans-v40-600italic.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src:
local('OpenSans-Bold'),
url('../fonts/open-sans/open-sans-v40-700.woff2') format('woff2');
}
// Full
@font-face {
font-display: swap;
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src:
local('OpenSans-BoldItalic'),
url('../fonts/open-sans/open-sans-v40-700italic.woff2') format('woff2');
}
// =============================================================================
// LATO (latin, latin-ext)
// =============================================================================
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: url('../fonts/lato/lato-v24-300.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: italic;
font-weight: 300;
src: url('../fonts/lato/lato-v24-300italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: url('../fonts/lato/lato-v24-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: url('../fonts/lato/lato-v24-italic.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: normal;
font-weight: 600 700;
src: url('../fonts/lato/lato-v24-700.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Lato';
font-style: italic;
font-weight: 600 700;
src: url('../fonts/lato/lato-v24-700italic.woff2') format('woff2');
}

View File

@ -336,23 +336,23 @@
// OPEN DYSLEXIC
// =============================================================================
// @font-face {
// font-family: "OpenDyslexic";
// src: local("OpenDyslexic3 Regular"),
// local("OpenDyslexic3-Regular"),
// url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");
// font-weight: 400;
// font-display: swap;
// }
@font-face {
font-family: "OpenDyslexic";
src: local("OpenDyslexic3 Regular"),
local("OpenDyslexic3-Regular"),
url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");
font-weight: 400;
font-display: swap;
}
// @font-face {
// font-family: "OpenDyslexic";
// src: local("OpenDyslexic3 Bold"),
// local("OpenDyslexic3-Bold"),
// url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");
// font-weight: 700;
// font-display: swap;
// }
@font-face {
font-family: "OpenDyslexic";
src: local("OpenDyslexic3 Bold"),
local("OpenDyslexic3-Bold"),
url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");
font-weight: 700;
font-display: swap;
}
// =============================================================================
// ROBOTO MONO (cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese)