Obviously it’s punishable by death to suggest placing Google Font links in head.php. I used to enqueue them as styles in scripts.php but now that I’ve added Grunt to my workflow everything is so beautifully minified and I don’t want to throw that off.
So, how is everyone adding Google Fonts to their Roots built sites?
I add it to head.php… I understand enqueuing scripts via Wordpress, but that is really so that Wordpress is aware of scripts and they are not loaded twice. I don’t see Google fonts as a Javascript or Jquery plugin, so I just paste in the code in the head.
So basically, you would probably continue to enqueue it in Wordpress if that works for you. But since you are loading it from Google and not your own server, you can’t really minify and concatenate it.
Something about adding files directly to head.php seems blasphemous.
Google Fonts provide an alternative using @import CSS syntax so what about using that somewhere? I realize that could be tricky because @import rules need to be the first lines of a CSS file.
Would love some other voices on this if anyone else has a recommendation…
I dump the @import line at the top of app.less and it works fine.
I know there are some that say don’t @import files, but seeing as that is how you import themes to child themes, i don’t see any problem.
Thanks @jayseventwo, guess I could’ve tried this on my own.
Also, if you don’t want to use @import rules you can just dive into the link and copy/paste the raw font-face rules from Google. That might be my newest preferred method. Only downside I can think of is if they ever change the path to the font files…
It’s true, working with Wordpress, if you are doing it correct, you enqueue your javascript and don’t load it manually.
However, going even a step further, is understanding what and why you do it. Then you understand when you can and possibly should do things differently.
In any case, there are multiple ways to get Google fonts on your site. @import is probably fine, as long as that’s the only .css file you’re actually importing. Speaking from experience, having multiple @import’s creates a noticeable lag on the website. That of course doesn’t affect importing less files, mind you, since they are all combined and minified.
Don’t flatten the import rule. The CSS changes according to the current browser’s font support.
@Foxaii ok, good tip!
Edit: not sure this advice is still valid because GF now provides @import syntax directly.
In the /lib/extras.php
/**
* Google Font
*/
function load_fonts() {
wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Neucha|Great+Vibes|Rock+Salt|Vast+
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'load_fonts');
This Hook add the Google font in the element
http://bournery.com/starter-roots/
Do you have a better way ?
Which one is better ?
With multiple fonts, I would continue to use the link option. I’m not sure if I would bother with the action though, you can easily just add it to the head directly.
By flatten, I meant going to the import src and copying the CSS over. The CSS is different depending on the device, so you would be significantly limiting support.
I usually put them directly in the head myself. If I’m using an asynchronous font library, I manually stick the script tag+code in the head too in the hopes of minimizing the FOUC.
In a new project with Roots 7.0.0, I’m calling Google Fonts in _main.js via the script provided in Google Fonts (‘javascript’ tab in ‘Use’ section) and it works fine!
common: {
init: function() {
WebFontConfig = {
google: { families: [ 'Raleway:400,600,700:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' === document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
}
},
I defined a constant
define('GOOGLE_FONTS', 'Lato:300,400,400italic,600,700|Raleway:300,400,500,600');
in the config.php
then in extras.php I added this function
/**
* Manage google fonts of load_google_font()
* set GOOGLE_FONTS constant in config.php
*/
function load_google_fonts() {
if( ! defined( 'GOOGLE_FONTS' ) ) return;
echo '<link href="http://fonts.googleapis.com/css?family=' . GOOGLE_FONTS . '" rel="stylesheet" type="text/css" />'."\n";
}
then call the hook ‘wp_head’ with priority 1:
add_action( 'wp_head', 'load_google_fonts' , 1);
Interesting method!!
Yeah, I really like that! Might just use it myself.
I like this approach!!
I actually prefer this method because I often run into issues where FOUT messes with things like Isotope, so it allows for events. More information can be seen here.
@exhtml minor thing you don’t need the protocol part.
Just use wf.src = '//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; and you’ll get the protocol relative benefit.