[Theme: twentytwelve] Enqueue two new Google Fonts
-
I’ve started a child theme with a separate functions.php file. I’m trying to enqueue two new Google fonts, but I’m clueless beyond using the snippet included in the functions.php file for turning Open Sans off.
/* Remove Google Open Sans */
function mytheme_dequeue_fonts() {
wp_dequeue_style( ‘twentytwelve-fonts’ );
}
add_action( ‘wp_enqueue_scripts’, ‘mytheme_dequeue_fonts’, 11 );
-
Please continue with your existing thread on this topic:
EDIT – reopened – closed in error — sorry!
So if anyone could help here, that would be wonderful!
either consider to use a plugin: http://wordpress.org/extend/plugins/search.php?q=google+fonts
or do it manually:
– in your google links from the other topic, scroll down to get to the blue box with ‘3. Add this code to your website:’
and just copy the href part
'http://fonts.googleapis.com/css?family=Abel'use this for the code you need to add to functions.php of your child theme:
function load_google_fonts() { wp_register_style('googleFontsAbel','http://fonts.googleapis.com/css?family=Abel'); wp_enqueue_style( 'googleFontsAbel'); wp_register_style('googleFontsOldStandardTT','http://fonts.googleapis.com/css?family=Old+Standard+TT'); wp_enqueue_style( 'googleFontsOldStandardTT'); } add_action('wp_print_styles', 'load_google_fonts');then use the font names in
font-familydeclarations as normal;example:
.site-title { font-family: 'Old Standard TT', 'Times New Roman', Times, serif; }I’ll have a quick look at this in a second. I just wanted to quickly say thank you! You’ve helped me twice now.
Thank you so much. Worked a treat!
The only problem is I then lose the body.custom-font-enabled class that’s added when Open Sans is used by default. How I have it that body class is no longer added.
/* Remove Google Open Sans */ function mytheme_dequeue_fonts() { wp_dequeue_style( 'twentytwelve-fonts' ); } add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 ); /* Enqueue New Google Fonts */ function load_google_fonts() { wp_register_style('googleFontsAbel','http://fonts.googleapis.com/css?family=Abel'); wp_enqueue_style( 'googleFontsAbel'); wp_register_style('googleFontsOldStandardTT','http://fonts.googleapis.com/css?family=Old+Standard+TT'); wp_enqueue_style( 'googleFontsOldStandardTT'); } add_action('wp_print_styles', 'load_google_fonts');Here’s that bit in functions.php in twentytwelve…
function twentytwelve_body_class( $classes ) { $background_color = get_background_color(); if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) ) $classes[] = 'full-width'; if ( is_page_template( 'page-templates/front-page.php' ) ) { $classes[] = 'template-front-page'; if ( has_post_thumbnail() ) $classes[] = 'has-post-thumbnail'; if ( is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' ) ) $classes[] = 'two-sidebars'; } if ( empty( $background_color ) ) $classes[] = 'custom-background-empty'; elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) ) $classes[] = 'custom-background-white'; // Enable custom font class only if the font CSS is queued to load. if ( wp_style_is( 'twentytwelve-fonts', 'queue' ) ) $classes[] = 'custom-font-enabled'; if ( ! is_multi_author() ) $classes[] = 'single-author'; return $classes; } add_filter( 'body_class', 'twentytwelve_body_class' );the
.custom-font-enabled classis only used in this style in Twenty Twelve:body.custom-font-enabled { font-family: "Open Sans", Helvetica, Arial, sans-serif; }yopu have two choices:
either
add one of your new google fonts directly to the body style in your child theme’s style.css;or
add a filter to functions.php of the child theme to add those body_class again if one of your google fonts is enqueued, plus add the correspondant body style to style.css;in functions.php (for example):
//add corrresponding body_class if new google font is loaded add_filter('body_class','twentytwelvechild_custom_font_body_classes'); function twentytwelvechild_custom_font_body_classes( $classes ) { if ( wp_style_is( 'googleFontsAbel', 'queue' ) ) $classes[] = 'custom-font-enabled'; return $classes; }in style.css (for example):
body.custom-font-enabled { font-family: Abel, Verdana, Arial, sans-serif; }no idea how you are planning to organize that with two custom fonts (?)
Thank you again!
Great thread, thank you.
the
.custom-font-enabledclass is only used in this style in Twenty Twelve:This just made my day, I was worried that the absence of this class would have some side-effects, thanks a lot!
$my_query_args = array( 'family' => 'Montserrat:400,700:latin' ); wp_enqueue_style('custom-google-fonts', add_query_arg( $my_query_args, "$protocol://fonts.googleapis.com/css" ), array(), null );I like Open Sans, so I didn’t touch that or dequeue it. Just added another enqueue style for the Montserrat Font.
The topic ‘[Theme: twentytwelve] Enqueue two new Google Fonts’ is closed to new replies.