Hi guys,
i must to paste this code in the <head> of my site with beans:
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">What is the better way with child theme? How should i do?
Thank you Fabio
Hi,
you could do it this way (paste in the functions.php of your child-theme):
add_action( 'beans_head', 'embed_google_font' );
function embed_google_font(){
echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">';
}Great! Thank you Timo!
Hi guys,
It is preferable to use the WP enqueue for all assets on your site.
add_action( 'wp_enqueue_scripts', 'example_assets' );
/**
* Enqueue assets.
*/
function example_assets() {
wp_enqueue_style( 'open-sans', 'https://fonts.googleapis.com/css?family=Open+Sans' );
}Happy coding,
But if I have a unique url, that embedded two or three different fonts (for example: Lobster, Montserrat, Raleway) like this:
<link href="https://fonts.googleapis.com/css?family=Lobster|Montserrat|Raleway" rel="stylesheet"> Could it be a problem? Is it better to add them separately?
Like this?
add_action( 'wp_enqueue_scripts', 'example_assets' );
function example_assets() {
wp_enqueue_style( 'Lobster', ' https://fonts.googleapis.com/css?family=Lobster ' );
wp_enqueue_style( 'Montserrat', ' https://fonts.googleapis.com/css?family=Montserrat ' );
wp_enqueue_style( 'Raleway', ' https://fonts.googleapis.com/css?family=Raleway ' );
}
Avoid multiple server requests. There are multiple ways to achieve that with only one request. This one is the simpliest way:
/**
* Enqueue Google fonts.
*/
add_action( 'wp_enqueue_scripts', function() {
$query_args = array(
'family' => 'Lobster:400,700|Montserrat:400,700|Raleway:400,700'
'subset' => 'latin,latin-ext',
);
wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
} )Wow, thank you Jozi!
I hope not to exaggerate with my questions XD, but...
What is the difference between wp_enqueue_style and wp_register_style?
And if I use wp_register_style, should not I also use wp_enqueue_style?
I've read something about it here: https://codex.wordpress.org/Function_Reference/wp_register_style
I ask you to understand more 🙂
Thanks a lot again
It was a quick reply, a copy/paste from my old project just to show the concept. To make the code more readable you can use wp_register_style and then enqueue it with all styles together on a single function.
Differences:
wp_register_style prepare styles to be added to the queue. Can be used on every hook.
wp_enqueue_styles adds styles directly to the queue. Can be hooked only on wp_enqueue_scripts or admin_enqueue_scripts (admin)
Usage:
/**
* Enqueue styles and scripts.
*/
add_action( 'wp_enqueue_scripts', function() {
// all styles.
wp_enqueue_style( 'main_style' );
wp_enqueue_style( 'google_fonts' ); // adds google fonts to the queue.
// all scripts.
...
} )Very helpfull Jozi! So, if I understand, this should be right...
//Enqueue Google fonts.
add_action( 'wp_enqueue_scripts', function() {
// all scripts.
$query_args = array(
'family' => 'Lobster:400,700|Montserrat:400,700|Raleway:400,700'
'subset' => 'latin,latin-ext',
);
wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
// all styles.
wp_enqueue_style( 'main_style' ); // Is this indispensable or can i remove it??
wp_enqueue_style( 'google_fonts' ); // adds google fonts to the queue.
} )wp_enqueue_style( 'main_style' ); Is this indispensable or can i remove it??
You can remove that wp_enqueue_style( 'main_style' ) as it was just as an example where you can enqueue all styles and scripts together in one single function.
You can safely use wp_enqueue_style() instead of wp_register_style() and automatically will add styles to the queue. The only difference of wp_register_styles() is that your code will look more readable and will be more easy to enqueue ( or not ) with conditional statements.
Confusing... ehh :/
I understand, finally. 🙂 Thank you very much.
I have tried this definitive way, I wanted to simplify the code as much as possible without using $query_args. However I hope that I have done it right anyway. 🙂
//Embed Google fonts.
add_action( 'wp_enqueue_scripts', 'embed_google_fonts' );
function embed_google_fonts() {
wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css?family=Lobster|Montserrat:400,700|Raleway:400,700' );
}