How to Enqueue CSS, Font-Awesome, Google Fonts in WordPress

If you are a newbie in WordPress development then enqueuing stylesheet, font-awesome icons, Google fonts, External stylesheet and enqueuing Javascript and Jquery in WordPress is something that you should take extra care.

However, you can include CSS file or fonts in the header file or in the head section of your WordPress website but this is not best practice at all. Including CSS files or fonts in the header can cause conflicts with other CSS files.

Advertisement

Further in this article, You will see enqueuing CSS, fonts, and external stylesheet and much more. But before that, let’s understand the function wp_enqueue_style() behind enqueuing CSS and fonts in WordPress.

wp_enqueue_style() – The function, which allows you to include stylesheet or CSS files in WordPress. This function first registers the stylesheet or CSS file and then includes it within your WordPress theme or plugin.

Another important thing to keep in mind about the wp_enqueue_function() function is, it accepts a few parameters, and it’s important to understand them to use this function most out of it.

wp_enqueue_style( ‘$handle’, ‘$src’, ‘$dep’, ‘$ver’, ‘$media’ );

  1. $handle – First of all its a Required Parameter and second is it accepts ‘string’ type value. This refers to the name of your stylesheet or CSS file. It could be different from your actual stylesheet name but it should be Unique. Basically this is used to identify your stylesheet.
  2. $src – As can be understood by its name, It refers to the source of the stylesheet or complete path to the stylesheet or CSS file.
  3. $dep – This refers to an array of the registered stylesheet or CSS files on which the current stylesheet or CSS file depends on. So this parameter holds the dependency for the current stylesheet. If you want to load your stylesheet after one or more CSS files then you can pass these stylesheet’s names within an array to set dependency for these files.
  4. $ver – This set the version number for your stylesheet. By default, It assigns the currently installed WordPress version number with a stylesheet if nothing has passed.
  5. $media – This refers to the media in which this stylesheet should load. The accepted values for this parameter are ‘all’, ‘screen’, ‘print’ and media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’. The default value for this parameter is set for all.

So as of now, you have got the idea how this actually works.

wp_enequeue_scripts The hook

WordPress also provides a hook to enqueue scripts and styles. It’s always good practice to keep all your styles and scripts within a function and use the wp_enqueue_scripts hook to enqueue them.

Remember, this hook will be used for both whether you are enqueuing CSS files for Javascript and jQuery files. Now let’s move on to the enqueuing CSS files and fonts.

Enqueue CSS or Style file in WordPress Theme

To enqueue CSS or style file in WordPress theme, add the below code in your theme’s functions.php file.

Remember: Don’t forget to change the name & path of the css file.

// Enqueuing Stylesheet or CSS in WordPress

function diwp_include_scripts_styles(){

   wp_enqueue_style( 'main-style', get_template_directory_uri().'/style.css');

}

add_action( 'wp_enqueue_scripts', diwp_include_scripts_styles);

// Ends Here

Enqueue multiple CSS files or Style file in WordPress Theme

To enqueue multiple CSS files, you can keep them within a function and enqueue them by WordPress hook.

Remember: Don’t forget to change the name & path of the css files.

// Enqueuing Multiple Stylesheets or CSS files in WordPress

function diwp_include_multiple_styles(){

    wp_enqueue_style( 'main-style', get_template_directory_uri().'/style.css');
    wp_enqueue_style( 'responsive-style', get_template_directory_uri().'/css/responsive.css');

}

add_action( ' wp_enqueue_scripts ', ' diwp_include_multiple_styles ' );

// Ends here

Enqueue Font Awesome Icons in WordPress Theme

To enqueue font-awesome icons in WordPress theme,

  1. First download the font awesome icons and keep them within your WordPress theme.
  2. Add the complete path to the font-awesome CSS by following your current theme directory.

Remember: Don’t forget to change the name & path of the font-awesome css file.

// Enqueuing Font Awesome icon in WordPress

function diwp_include_font_awesome_styles(){

    wp_enqueue_style( 'font-awesome-style', get_template_directory_uri().'/assets/fonts/font-awesome/css/font-awesome.css', );    

}

add_action( 'wp_enqueue_scripts', diwp_include_font_awesome_styles);

// Ends Here

Enqueue Google Fonts in WordPress Theme

Enqueueing google fonts in WordPress theme is super easy. Just follow the steps below.

  1. Go to Google fonts and select any font that you want to use.enqueue-include-google-fonts-in-wordpress
  2. Once you select, a little box comes up at the bottom.
  3. Now open that box and select the font URL
    enqueue-include-google-fonts-in-wordpress-3
  4. Add that font URL within your enqueue function and that’s it. Your google fonts are ready to use.
function diwp_include_google_fonts() { 

	wp_enqueue_style( 'raleway', 'https://fonts.googleapis.com/css?family=Raleway' ); 

}
add_action( 'wp_enqueue_scripts', 'diwp_include_google_fonts');

I hope this post helped you to learn to enqueue any stylesheet or CSS files, font awesome icons and google fonts in WordPress theme.

Advertisement

Related Posts

Leave a Reply

Your email address will not be published.

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top