Unable to add font styles to WordPress theme’s functions.php file

Question

So I'm making a custom theme for WordPress and I'm trying to load the styles for the site into the site, the CSS styles are loading into the site successfully, but the font styles are not working for unknown reasons.

This is the functions.php file:

<?php
   function wp_enqueue_styles(){
    wp_enqueue_style('font_style',"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&family=Cormorant:wght@400;500;600;700&family=Outfit:wght@400;500;700&family=Pacifico&family=Roboto+Condensed:ital,wght@0,300;0,400;1,300&display=swap", array(),"1.0", "all");
    wp_enqueue_style('main_css',get_template_directory_uri() . "/style.css", array('font_style'),"1.0", "all");
}
add_action('wp_enqueue_scripts','wp_enqueue_styles');
?>

Like I said, the style.css is valid, just the fonts are not working.

I tried making font_style a dependency so that it is loaded before main.css, but that didn't solve the problem.

Answer 1

This is because of the structure of Google Fonts URLs. There are multiple family query parameters, which means the last one that appears will override the others. This is a known issue, and (last time I knew about it) WordPress thought it was an issue with Google Fonts, not its own URL handling issue.

My solution was to register a separate stylesheet for each required font and then load each one as needed.

View answers here: https://stackoverflow.com/a/60954323/5490855