How paste a code in the head of the site


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 ' );
}

Jo

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 );
} )

Edited 2 months, 3 weeks ago by Jo


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


Jo

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??

Edited 2 months, 3 weeks ago by Fabio Galli


Jo

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.

Edited 2 months, 3 weeks ago by Fabio Galli


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' );
}

Edited 2 months, 3 weeks ago by Fabio Galli

Write a reply

Login or register to write a reply, it's free!