Installing custom font into WP not working - css

Question

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

Answer 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()
Source # https://developer.wordpress.org/reference/functions/wp_enqueue_style/
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 in 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' href='https://fonts.gstatic.com'>" . 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;
}