Skip to content

Instantly share code, notes, and snippets.

@carolinan
Created June 10, 2019 16:06
Show Gist options
  • Save carolinan/7c2b002465b260ab3a74ec2d9b924c8c to your computer and use it in GitHub Desktop.
Save carolinan/7c2b002465b260ab3a74ec2d9b924c8c to your computer and use it in GitHub Desktop.
Things we do allow
The links:
https://fonts.googleapis.com/css
//fonts.googleapis.com/css
https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js
https://fonts.gstatic.com
The code examples:
Notes:
Examples are separated with ----.
We need to cover both wp_register_style and wp_enqueue_style
function twentyseventeen_fonts_url() {
$fonts_url = '';
/*
* Translators: If there are characters in your language that are not
* supported by Libre Franklin, translate this to 'off'. Do not translate
* into your own language.
*/
$libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );
if ( 'off' !== $libre_franklin ) {
$font_families = array();
$font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
$query_args = array(
'family' => urlencode( implode( '|', $font_families ) ),
'subset' => urlencode( 'latin,latin-ext' ),
);
$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
}
return esc_url_raw( $fonts_url );
}
----
function twentyseventeen_resource_hints( $urls, $relation_type ) {
if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
$urls[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin',
);
}
return $urls;
}
----
This is only a partial of a PHP file in Kirki:
kirki/modules/webfonts/webfonts.php
return array("kind" => "webfonts#webfontList", "items" => array(array("kind" => "webfonts#webfont", "family" => "ABeeZee", "category" => "sans-serif",
"variants" => array("regular", "italic"), "subsets" => array("latin"),
"version" => "v11", "lastModified" => "2017-10-10",
"files" => array("regular" => "http://fonts.gstatic.com/s/abeezee/v11/mE5BOuZKGln_Ex0uYKpIaw.ttf",
"italic" => "http://fonts.gstatic.com/s/abeezee/v11/kpplLynmYgP0YtlJA3atRw.ttf")),
----
if ( ! function_exists( 'ot_load_google_fonts_css' ) ) {
function ot_load_google_fonts_css() {
/* don't load in the admin */
if ( is_admin() )
return;
$ot_google_fonts = get_theme_mod( 'ot_google_fonts', array() );
$ot_set_google_fonts = get_theme_mod( 'ot_set_google_fonts', array() );
$families = array();
$subsets = array();
$append = '';
if ( ! empty( $ot_set_google_fonts ) ) {
foreach( $ot_set_google_fonts as $id => $fonts ) {
foreach( $fonts as $font ) {
// Can't find the font, bail!
if ( ! isset( $ot_google_fonts[$font['family']]['family'] ) ) {
continue;
}
// Set variants & subsets
if ( ! empty( $font['variants'] ) && is_array( $font['variants'] ) ) {
// Variants string
$variants = ':' . implode( ',', $font['variants'] );
// Add subsets to array
if ( ! empty( $font['subsets'] ) && is_array( $font['subsets'] ) ) {
foreach( $font['subsets'] as $subset ) {
$subsets[] = $subset;
}
}
}
// Add family & variants to array
if ( isset( $variants ) ) {
$families[] = str_replace( ' ', '+', $ot_google_fonts[$font['family']]['family'] ) . $variants;
}
}
}
}
if ( ! empty( $families ) ) {
$families = array_unique( $families );
// Append all subsets to the path, unless the only subset is latin.
if ( ! empty( $subsets ) ) {
$subsets = implode( ',', array_unique( $subsets ) );
if ( $subsets != 'latin' ) {
$append = '&subset=' . $subsets;
}
}
wp_enqueue_style( 'ot-google-fonts', esc_url( '//fonts.googleapis.com/css?family=' . implode( '|', $families ) ) . $append, false, null );
}
}
}
----
wp_register_style( 'google_fonts', '//fonts.googleapis.com/css?family=Lato' );
----
if (!function_exists('qqq_scripts')) {
function qqq_scripts() {
wp_enqueue_style('qqq-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,600', array(), null);
}
}
add_action('wp_enqueue_scripts', 'qqq_scripts');
----
wp_enqueue_script(
'webfontloader',
'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js',
array( 'jquery' ),
'1.5.0',
true
);
----
Note that this is inside a PHP file:
<script>
/* You can add more configuration options to webfontloader by previously defining the WebFontConfig with your options */
if ( typeof WebFontConfig === "undefined" ) {
WebFontConfig = new Object();
}
WebFontConfig['google'] = {families: [<?php echo $typography->makeGoogleWebfontString ( $this->typography ) ?>]};
(function() {
var wf = document.createElement( 'script' );
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName( 'script' )[0];
s.parentNode.insertBefore( wf, s );
})();
</script>
----
The following is a partial from a JSON file:
premier/inc/fonts.json
"files": {
"300": "http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTS3USBnSvpkopQaUR-2r7iU.ttf",
"300italic": "http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxi9-WlPSxbfiI49GsXo3q0g.ttf",
"regular": "http://fonts.gstatic.com/s/opensans/v10/IgZJs4-7SA1XX_edsoXWog.ttf",
"italic": "http://fonts.gstatic.com/s/opensans/v10/O4NhV7_qs9r9seTo7fnsVKCWcynf_cDxXwCLxiixG1c.ttf",
"600": "http://fonts.gstatic.com/s/opensans/v10/MTP_ySUJH_bn48VBG8sNSi3USBnSvpkopQaUR-2r7iU.ttf",
"600italic": "http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxpZ7xm-Bj30Bj2KNdXDzSZg.ttf",
"700": "http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzC3USBnSvpkopQaUR-2r7iU.ttf",
"700italic": "http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxne1Pd76Vl7zRpE7NLJQ7XU.ttf",
"800": "http://fonts.gstatic.com/s/opensans/v10/EInbV5DfGHOiMmvb1Xr-hi3USBnSvpkopQaUR-2r7iU.ttf",
"800italic": "http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxg89PwPrYLaRFJ-HNCU9NbA.ttf"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment