0

So, I am trying to use the Rubik Mono One font on a website of mine, but it won't show up for anyone. I use @font face and tried clearing my cache ant it still did not work, here is the css:

@font-face {
font-family: 'Rubik Mono One';
src: url(https://fonts.gstatic.com/s/rubikmonoone/v9/UqyJK8kPP3hjw6ANTdfRk9YSN983TKU.woff2) format('woff2');
}
New contributor
DanteAndHubble is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
2
  • Perhaps remove the double entry where it says src: src: change to src: ? Also should the font-family be rubikmonoone instead of Rubik Mono One ? – JoshieWahWah Mar 17 at 21:56
  • oops I made a typo, sorry. I still tried it again but it did not work.. – DanteAndHubble Mar 17 at 22:13
1

I just made 3 different tests with 3 different fonts including Rubik Mono One and everything is working fine.

  • Either you're enqueuing it badly. eg: You're not using <link rel="preconnect" href="https://fonts.gstatic.com">.
  • Or you're using some kind of framework like Bootstrap which is taking priority over your font.

Understanding dependencies and sequential order

Wordpress let you specify a dependency array upon script enqueuing.

$deps (string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on. Default value: array()

Your css enqueuing order should look like this:

framework google font stylesheet

If your stylesheet is enqueued last, your defined style will be higher up is the firing sequence.

As I mentioned, we also need to add <link rel="preconnect" href="https://fonts.gstatic.com"> for Google Font to actually work. We can do just that by using style_loader_tag wordpress filter, which will filters the HTML link tag of our enqueued Google Font.

Here is the final code. Do keep in mind that, if you're using a framework you must specify the dependency for the Google Font tag.

<?php
add_action( 'wp_enqueue_scripts', 'theme_fonts' );
function theme_fonts() {
    if ( ! is_admin() ) {

        /**
         * Register & Enqueue gfont_css.
         * @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
        */
        wp_enqueue_style( 'gfont_css', 'https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap', [], wp_get_theme()->version, 'all' );
        
        /**
         * Add mandatory Google Font rel='preconnect' <link> and required attributes to gfont_css
         * Filters the HTML link tag of an enqueued style & add required attributes
         * @link https://developer.wordpress.org/reference/hooks/style_loader_tag/
         */
        add_filter( 'style_loader_tag', 'data_gfont_css', 10, 3 );
        function data_gfont_css( $tag, $handle, $src ) {
            if( $handle === 'gfont_css' ) {
                $tag = str_replace(
                    "<link rel='stylesheet'",
                    "<link rel='preconnect' >" . PHP_EOL . "<link rel='stylesheet'",
                    $tag
                );
            };
            return $tag;
        };

        /**
        * Register & Enqueue style_css.
        * @link https://developer.wordpress.org/reference/functions/wp_enqueue_style/
        */
        wp_enqueue_style( 'style_css', get_stylesheet_uri(), [ 'gfont_css' ], wp_get_theme()->version, 'all' );

    };
};
?>

Dependencies are specified in betweens the brackets //... [ 'gfont_css' ] which is the equivalent to array( 'gfont_css' ).

Finally we can apply our font to our elements in our style.css, and we can add an !important statement to override as a redundancy. better not to do it tho if you're using multiple fonts.

body {
  font-family: 'Rubik Mono One', sans-serif !important;
}
2
  • thank you but how do I add the HTML, I am using the WP additional css feature, I am very new to this, sorry – DanteAndHubble Mar 17 at 22:33
  • Add the html ? you mean the php functions ? You add them to your function.php file. – amarinediary Mar 17 at 22:55

Your Answer

DanteAndHubble is a new contributor. Be nice, and check out our Code of Conduct.

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.