-1

I'm not sure why but I tried to place Google Fonts at the bottom of the page (in the Javascript section) but it doesn't want to load the font.

What should I be looking for that might be preventing that?

My logic is that I need so speed up my site and placing the fonts at the bottom of the page I am sure will be better....

-1

There are various ways to accomplish this, but I think it's neatest and "most WordPress" to enqueue the fonts in your functions file, and then you can specifiy that they should load in the footer using the appropriate parameter:

function wpb_add_google_fonts() {   
  wp_enqueue_style( 'wpse-google-fonts', 'http://fonts.googleapis.com/css?family=Roboto', '', '', true ); 
} 
add_action( 'wp_enqueue_scripts', 'wpse_add_google_fonts' );
  • WordPress doesn't have a parameter to move styles to the footer. It does for scripts. I guess you might trying loading it with wp_enqueue_scripts, but the above version will just print media="1" into the script tag. – Jake Nov 8 '18 at 2:41
-1

you need to simple add the stylesheet to the "head" section of your header.php file for your chosen theme such as

 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

This will load the font to your site, then within your themes CSS you simply call that font. Here is a great resource link explaining everything for you to add google fonts to your WordPress site.

http://www.wpbeginner.com/wp-themes/how-add-google-web-fonts-wordpress-themes/

Here is an article on the google blog. Also very insightful https://fonts.googleblog.com/2010/09/optimizing-use-of-google-font-api.html

  • I thought that that wasn't 'the wordpress way' – henry Aug 16 '17 at 6:46
  • agreed at times google frowns upon externally linking content, but when its google you are leeching from they are fine with it. secondly the resources this one item will utilize will not effect your page speeds like many plugins that get added will. Obviously if you are using a paid theme you should be using a child theme for any customizations but other then that I always keep my css at the top and below the fold javascripts and such at the footer. – DigitalDesigner Aug 16 '17 at 6:49
  • added the google font blog article as well for you to have better insight on the issue you are having :) – DigitalDesigner Aug 16 '17 at 6:51
  • Thanks. In fact I had the fonts load exactly as you suggest but then i tested for Google Speed and it was being flagged as 'above the fold' content blocking - so it was detrimental to speed. Your argument sounds good though... – henry Aug 16 '17 at 6:52
  • maybe check this questions answer, may be more up your alley. stackoverflow.com/questions/11045776/how-to-load-google-fonts – DigitalDesigner Aug 16 '17 at 6:59
-1
function wpb_add_google_fonts() {   
  wp_enqueue_style( 'wpse-google-fonts', 'http://fonts.googleapis.com/css?family=Roboto', '', '', true ); 
} 
add_action( 'wp_enqueue_scripts', 'wpse_add_google_fonts' );

Enqueue the fonts in function.php. @mayersdesign but you should optimize his code. Optimizing the use of the Google Font API by replace url if you used multiple fonts Example: http://fonts.googleapis.com/css?family=Roboto -->
http://fonts.googleapis.com/css?family=Roboto +Sans|Lobster. But someone said you should host google web fonts or what you used or in folder on your server?

  • WordPress doesn't have a parameter to move styles to the footer. It does for scripts. I guess you might trying loading it with wp_enqueue_scripts, but the above version will just print media="1" into the script tag. – Jake Nov 8 '18 at 2:41
  • why loading Google fonts in the Javascript section?Easy way is loading it with wp_enqueue_scripts – Rei Dec 25 '18 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.