I am trying to enqueue multiple Google fonts with multiple weights (400,600,700, etc,) and styles (normal, italic) and can’t figure out why it is not working.
This is the code that I am using in the functions.php:
function load_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Dosis:400,600,700|Roboto:400,400italic,700,700italic');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_fonts');
This is the link that is being output in the source:
<link rel="stylesheet" id='googleFonts-css' href="http://fonts.googleapis.com/css?family=+Dosis%3A400%2C600%2C700%7CRoboto%3A400%2C400italic%2C700%2C700italic&ver=4.4.2" type="text/css" media="all" />
I tested IOS devices at BrowsserStack and using the WhatFont browser extension and the WhatFont extension for Safari on an iPhone (worked well). It showed it using the fallback font-family Arial. I realized that this has something to do with the server (cheap shared hosted plan — ugh!). What I am not quite sure, but I appreciate everyone’s input
Any idea’s?
5 Answers
Adding Multiple Google fonts in WordPress Standard Way
function adding_theme_css_js(){
wp_enqueue_style("adding-google-fonts", all_google_fonts());
}
add_action("wp_enqueue_scripts","adding_theme_css_js");
function all_google_fonts() {
$fonts = array(
"Open+Sans:400,300",
"Raleway:400,600"
);
$fonts_collection = add_query_arg(array(
"family"=>urlencode(implode("|",$fonts)),
"subset"=>"latin"
),'https://fonts.googleapis.com/css');
return $fonts_collection;
}