Enqueueing Google Fonts In WordPress Method Two

As we have already described how to enqueue the Google Fonts in your WordPress project through one method, now we will be enqueueing it via the translation ready way method.

Here, for the method of enqueue of Google Fonts in translation ready method, first of all what we have to do is to create the function for enqueueing the Google font as below:

function creative_blog_fonts_url() {
$fonts_url = '';
$fonts = array();
$subsets = 'latin,latin-ext';
// applying the translators for the Google Fonts used
/* Translators: If there are characters in your language that are not
* supported by Open Sans, translate this to 'off'. Do not translate
* into your own language.
*/
if ('off' !== _x('on', 'Open Sans font: on or off', 'creative-blog')) {
$fonts[] = 'Open Sans:400,400italic,700,700italic';
}

/*
* Translators: To add an additional character subset specific to your language,
* translate this to 'cyrillic'. Do not translate into your own language.
*/
$subset = _x('no-subset', 'Add new subset ( cyrillic, greek, vietnamese )', 'creative-blog');

if ('cyrillic' == $subset) {
$subsets .= ',cyrillic,cyrillic-ext';
} elseif ('greek' == $subset) {
$subsets .= ',greek-ext,greek';
} elseif ('vietnamese' == $subset) {
$subsets .= ',vietnamese';
}

// Ready to enqueue Google Font
if ($fonts) {
$fonts_url = add_query_arg(array(
'family' => urlencode(implode('|', $fonts)),
'subset' => urlencode($subsets),
), '//fonts.googleapis.com/css');
}
return $fonts_url;
}

Here in the above example, first of all, we have created an array in the variable $fonts_url, since we may add more than one Google fonts there for our project. Now, again $fonts variable is assigned as an array and we have provided $subsets value as latin,lation-ext, since this subsets is universal, ie, it is common in all of the Google fonts available.

Now, we will provide the translation method to enqueue the Google Fonts in your project. Here, what we have to do is, we need to check if the condition is true or not, as described in the translation file, which will be controlled by the first value used in _x() function. So, here if on is changed to off in the translation file, then, this enqueued Google font will not be loaded.

Now, again since there may be subset available for that chosen Google Fonts, so we also need to check those in the next step as above, which is done in just below the enqueue of Google font option. Now, finally, the enqueued Google font is ready to be used, and is now assigned to the variable $fonts. Now, the above process is completed. Now, to enqueue this font, we will have to create the function as before described here:

But, here the change is that, we do not provide the url of the Google font as above described, we will provide the function name created above instead in it as below:

function creative_blog_scripts() {
// Use of enqueued google fonts.
wp_enqueue_style('creative-blog-google-fonts', creative_blog_fonts_url(), array(), null);
}
add_action('wp_enqueue_scripts', 'creative_blog_scripts');

Now, by using this method, you can control about the need of the Google font subsets to be used in your site, since some of the language may need the subsets and other not. Here, below is the final code for enqueueing the Google font in your site:

/**
* Create the required Google Fonts
*/
function creative_blog_fonts_url() {
$fonts_url = '';
$fonts = array();
$subsets = 'latin,latin-ext';
// applying the translators for the Google Fonts used
/* Translators: If there are characters in your language that are not
* supported by Open Sans, translate this to 'off'. Do not translate
* into your own language.
*/
if ('off' !== _x('on', 'Open Sans font: on or off', 'creative-blog')) {
$fonts[] = 'Open Sans:400,400italic,700,700italic';
}
/*
* Translators: To add an additional character subset specific to your language,
* translate this to 'cyrillic'. Do not translate into your own language.
*/
$subset = _x('no-subset', 'Add new subset ( cyrillic, greek, vietnamese )', 'creative-blog');
if ('cyrillic' == $subset) {
$subsets .= ',cyrillic,cyrillic-ext';
} elseif ('greek' == $subset) {
$subsets .= ',greek-ext,greek';
} elseif ('vietnamese' == $subset) {
$subsets .= ',vietnamese';
}
// Ready to enqueue Google Font
if ($fonts) {
$fonts_url = add_query_arg(array(
'family' => urlencode(implode('|', $fonts)),
'subset' => urlencode($subsets),
), '//fonts.googleapis.com/css');
}
return $fonts_url;
}
/**
* Load the created Google font
*/
function creative_blog_scripts() {
// use of enqueued google fonts
wp_enqueue_style('creative-blog-google-fonts', creative_blog_fonts_url(), array(), null);
}
add_action('wp_enqueue_scripts', 'creative_blog_scripts');

We hope that, now you can enqueue the Google Fonts properly in your upcoming projects by using the method described above, if you are in success in following the tutorial and loading the required Google fonts in your project properly. But, if still you could not, then, do comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.