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&#038;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?

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;
 }