Enqueue Google Fonts WP

March 27, 2025 · AI Conversations

User

Assistant

To register and enqueue the Google Fonts (Poppins) in WordPress using `wp_enqueue_style`, you can add the following code to your theme’s `functions.php` file (or inside your custom plugin or enqueue file):

function custom_enqueue_google_fonts() {
    // Preconnect for faster font loading
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "n";

    // Enqueue the Poppins font
    wp_enqueue_style(
        'custom-google-fonts',
        'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
        false
    );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_google_fonts');

> ✅ **Note:** The `preconnect` tags are echoed directly because `wp_enqueue_style()` does not support `rel="preconnect"`. Alternatively, you can add the `preconnect` lines inside the “ using the `wp_head` action:

function custom_preconnect_fonts() {
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">' . "n";
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "n";
}
add_action('wp_head', 'custom_preconnect_fonts', 1);

Let me know if you're using a block theme (like with `theme.json`), I can show that method too.

User

ad custom jquery

Assistant

To **add a custom jQuery file** in WordPress, you can enqueue it in your theme or plugin using `wp_enqueue_script`. Here's how you can do it the right way:

### ✅ Add Custom jQuery (e.g., from your theme folder)

Let's say your custom jQuery file is located at:
`/wp-content/themes/your-theme/js/custom.js`

Add this to your `functions.php` file:

function custom_enqueue_scripts() {
    // Enqueue jQuery (WordPress includes jQuery by default)
    wp_enqueue_script('jquery');

    // Enqueue your custom jQuery file
    wp_enqueue_script(
        'custom-jquery',
        get_template_directory_uri() . '/js/custom.js',
        array('jquery'), // Make sure it loads after jQuery
        null,
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

### ✅ If you're using a child theme:
Replace `get_template_directory_uri()` with `get_stylesheet_directory_uri()` like so:

get_stylesheet_directory_uri() . '/js/custom.js'

—

### 📌 Bonus: Add jQuery code inside `custom.js`

jQuery(document).ready(function($) {
    // Your custom jQuery code here
    console.log('Custom jQuery is working!');
});

Let me know if you're loading it from a CDN or want to deregister WordPress's default jQuery too.

Enqueue Google Fonts WP

Leave a Comment Cancel