Google fonts the "Right" Way
-
Topic
-
-
Replies
-
Hello,
I’d just hook to wp_head from your child theme’s functions.php. So, it could look something like this:
/** * Add Google fonts to <head> */ function my_fonts(){ ?> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <?php } add_action( 'wp_head', 'my_fonts', 5 );Note: I added priority “5” so it get inserted before your other CSS in the head so you have a chance to add your CSS in style.css like:
body { font-family: 'Roboto'; } h1, h2, h3 { font-family: 'PT Sans'; }Can also enqueue and be 100% devoted to WPs version of “best practices” 🙂
add_action( 'wp_enqueue_scripts', 'font_load', 4 ); function font_load() { // Add Google fonts - Check this http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/ wp_enqueue_style( 'google_font1', 'http://fonts.googleapis.com/css?family=Oxygen:400,700', '', NULL, 'all' ); }Anyway if you search you might get told to use “web font loader” or something. I have found that to be major crap and was happy a Google guy confirmed this, here http://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import/12380004#12380004 not in so many words, but as he says 90% of sites should only use “link”. If you do that via enqueue or spit it out like Jason posted I doubt matters one bit. Reason to enqueue is to make file(s) compliant with caching/minify plugins, besides being anal about WP “best practices”, but I think irrelevant with a 3rd party thing like Google fonts. If I am not mistaken there is some browser sniffing going on and so you cant and should not try to cache anything. All browsers on the planet are not delivered the same = it works!
If you get positive results with their web font loader script I like to hear about it. I think waste of time but always looking for cool things to do when bored 😉 I remember testing because I thought it was cool, then got disappointed – then did research! and found the Google guys statements. Order of events messed up…
You also say “fast” and “efficient” so also check Google speedometer or what it is for each font. Some are heavy, others not. And also check if you need all variants of the font. http://fonts.googleapis.com/css?family=Oxygen:400,700 only loads normal and bold. Some have much more = increase download size with perhaps some added eye-candy. Besides that hope visitors have fast connection to a locally placed Google server.
If you check that link in different browser you will see why you cant really cache anything and enqueue or not is not really important.
Last. If crazy and in to “site must appear to be fully functional under 1 sec. or I might as well close shop” add this to header.php
<link rel="dns-prefetch" href="//fonts.googleapis.com">
Do this for Youtube, Twitter and perhaps CDN. Actually, do this for ANY 3rd party service which is commonly used on site. Speeeeed 🙂 You must acknowledge importance of “ms” not “seconds” or it wont matter. “fast” consist of many things which adds up. How you must think or it will not be “worth it”, heh.
Lots more, http://www.stevesouders.com/blog/2013/11/07/prebrowsing/ and some day you will see it pimped in WordPress world, I will guess via tutorials on how to maximize W3TC or what ever convenient “layer” 🙂 Is not so complicated. dns-prefetch is hard core “low hanging fruit” you can use right now.
@karlo You can’t enqueue them as normal CSS files because WordPress is going to add the version of the CSS file to the end, and you can’t have two
?in the same URL. So, you get something like:http://fonts.googleapis.com/css?family=Oxygen:400,700?ver=3.7
If there’s some way around that, let me know because I’m not aware of one.
Anyway, it may “work” in a lot of instances, but not a viable solution across all browsers. This is why I suggest simply including them the way I showed above, and is essentially what I do in the framework with the
themeblvd_include_google_fontsfunction.@karlo Nevermind! By setting the
$verto NULL, you get around that. I was not aware of that. That’s great.@matthewmacmillan So, in light of what I just learned from @karlo, I would personally suggest just enqueuing this as normal stylesheet to WordPress best practices like this:
/** * Add Google fonts to <head> */ function my_fonts(){ wp_enqueue_style( 'font_roboto', 'http://fonts.googleapis.com/css?family=Roboto', '', NULL ); wp_enqueue_style( 'font_ptsans', 'http://fonts.googleapis.com/css?family=PT+Sans', '', NULL ); } add_action( 'wp_enqueue_scripts', 'my_fonts', 4 );Here is more about this from the WordPress codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Yeah and it give you more points in speed tests because apparently some servers (proxy?) can have issues with a file containing “?” – is not cached properly or what ever. NULL stick tongue out to all that. But also not brilliant in all contexts. How to break cache? Users browser cache will see no reason to reload changed file – as it has NOT changed in the eyes of browser. So if you have an expire time of 6 months and user do not clear cache, X site can in theory be broken for 6 months! Whole point of NULL is to maintain status quo but not always wanted. Is tricky – only safe method is to not tinker with NULL that is for sure. WP does that out of the box for good reasons. Works ok with Google font though but almost always a “but” to speed tricks. Never forget 🙂
Wow! Guys this is got the job done Thank you very much. It testing really nice and fast, for now. I’m trying to keep the site load as minimal as possible for mobile users in less than developed countries, so I’m shaving it all down as minimal as possible. I continue to be extremely impressed with Jumpstart, and this community. Thank you both of you.
Many more questions to come.
Matt
Then you have a real valid reason to dig in. Big risk when optimizing is you sit in front of big ass computer, fast internet, half the site in cache already and think it is not so bad. But always depends. CDN can be fluff but might be helpful to you as lets say a US focused server with no data centers world wide is likely to be slower in Kenya than Google, CloudFlare and others.
Also check http://www.webpagetest.org/ which lets you test via servers placed in different parts of the world. Is rigid with certain things! I think stupid at times but service is the best, you can record load even! Video is always good.
If not super interested find out what ACTUALLY matters. You know images, Gzip, full page WordPress Cache if not possible to get even more advanced. For this setup with many connections on slow mobile will be slow so also minify of JS/CSS wont be waste of time. But same old tricks take care of most. Will give you 90-95 out of 100 in speed test lingo. Can just use build in testing tools in Chrome/Page Speed or Yslow from Yahoo. I guess Page Insight as well http://developers.google.com/speed/pagespeed/insights/ If you do not mess up with horror plugins it is easy. May be you need to find faster server to get any useful output – also some kind of result.
You can keep updated via this Google+ group https://plus.google.com/communities/113993151878673122189 Mainly Google people but they own this area (Dev Tools play a big role in that!). Links to conference talks, videos. Not all interesting, they hype stuff too! – but is latest and greatest about performance. Just remember you run fairly big CMS/Blog tool. Cant hand code and easily fine tune stuff like certain others building “apps”. Do not get depressed, lol.
- You must be logged in to reply to this topic.