malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Prototype dynamic font inclusion

Browse Source
This commit is contained in:
Tetrakern 2024-02-07 02:22:59 +01:00
parent 05643cd511
commit 5da049c944
14 changed files with 94 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,3 +3,4 @@
*.codekit3
.vscode
wp-cli.phar
bundled-fonts.css

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/fonts.css
View File

File diff suppressed because one or more lines are too long

1
fonts/lato/info.txt
View File

@ -1,3 +1,4 @@
Skip: true
Name: Lato
Family: Lato
Type: sans-serif

1
fonts/open-dyslexic-3/font.css
View File

@ -0,0 +1 @@
@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}

1
fonts/open-sans/font.css
View File

File diff suppressed because one or more lines are too long

1
fonts/open-sans/info.txt
View File

@ -1,3 +1,4 @@
Skip: true
Name: Open Sans
Family: 'Open Sans'
Type: sans-serif

0
fonts/system-font/font.css
View File

6
fonts/system-font/info.txt
View File

@ -1,6 +0,0 @@
Stub: stub
Name: System Font
Family: var(--ff-system)
Styles: normal, italic
Weights: 300, 400, 500, 600, 700
About: <p>This is the default system font stack: <code>'-apple-system', 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;</code></p>

51
includes/functions/_theme_setup.php
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';
return $exclude . ', fonts.css, bundled-fonts.css';
}
add_filter( 'autoptimize_filter_css_exclude', 'fictioneer_ao_exclude_css', 10, 1 );
@ -1016,9 +1016,9 @@ add_filter( 'autoptimize_filter_css_exclude', 'fictioneer_ao_exclude_css', 10, 1
// OUTPUT HEAD FONTS
// =============================================================================
if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
if ( ! function_exists( 'fictioneer_output_critical_fonts' ) ) {
/**
* Output fonts in <head>
* Output critical path fonts in <head>
*
* Critical fonts that need to be loaded as fast as possible and are
* therefore inlined in the <head>.
@ -1026,7 +1026,7 @@ if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
* @since 5.0.0
*/
function fictioneer_output_head_fonts() {
function fictioneer_output_critical_fonts() {
// Setup
$uri = get_template_directory_uri() . '/fonts/';
@ -1049,7 +1049,7 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
function fictioneer_output_head_meta() {
// Setup
$font_link = get_template_directory_uri() . '/css/fonts.css?ver=' . FICTIONEER_VERSION;
$base_fonts_href = get_template_directory_uri() . '/css/fonts.css?ver=' . FICTIONEER_VERSION;
// Start HTML ---> ?>
<meta charset="<?php echo get_bloginfo( 'charset' ); ?>">
@ -1059,10 +1059,45 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="<?php echo '#' . get_background_color(); ?>">
<meta name="referrer" content="strict-origin-when-cross-origin">
<?php fictioneer_output_head_fonts(); ?>
<link rel="stylesheet" href="<?php echo $font_link; ?>" media="print" onload="this.media='all'; this.onload = null;">
<noscript><link rel="stylesheet" href="<?php echo $font_link; ?>"></noscript>
<?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 = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
if ( ! file_exists( dirname( $bundled_fonts ) ) ) {
// Create bundled font CSS file
mkdir( dirname( $bundled_fonts ), 0755, true );
// Prepare
$fonts = fictioneer_get_font_data();
$combined_font_css = '';
// Build
foreach ( $fonts as $font ) {
if ( $font['skip'] ?? 0 ) {
continue;
}
$combined_font_css .= file_get_contents( $font['css_file'] );
}
// Save
file_put_contents( $bundled_fonts, $combined_font_css );
}
if ( file_exists( dirname( $bundled_fonts ) ) ) {
$custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css';
// Start HTML ---> ?>
<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
}
}
}

5
includes/functions/_utility.php
View File

@ -2748,10 +2748,11 @@ function fictioneer_get_font_data() {
$full_path = "{$font_dir}/{$path}";
$info_file = "$full_path/info.txt";
$css_file = "$full_path/font.css";
if ( is_dir( $full_path ) && file_exists( $info_file ) && file_exists( "$full_path/font.css" ) ) {
if ( is_dir( $full_path ) && file_exists( $info_file ) && file_exists( $css_file ) ) {
$folder = basename( $path );
$info = array( 'css' => "/fonts/{$folder}/font.css" );
$info = array( 'css_path' => "/fonts/{$folder}/font.css", 'css_file' => $css_file );
$lines = file( $info_file, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES );
foreach ( $lines as $line ) {

32
src/scss/fonts.scss
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)

26
src/scss/fonts/open-dyslexic-3.scss Normal file
View File

@ -0,0 +1,26 @@
/*
* @note This file must be ignored by Autoptimize!
* @link https://gwfh.mranftl.com/fonts
*/
// =============================================================================
// 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 Bold"),
local("OpenDyslexic3-Bold"),
url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");
font-weight: 700;
font-display: swap;
}

278
src/scss/fonts/open-sans.scss
View File

@ -1,278 +0,0 @@
/*
* @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');
}