How to enqueue google fonts if we use directly in style.css

Question

My theme has "selecting differrent google fonts options" So for that we need to load several .woff2 files. So i have added 2 type of woff2 files in Top of CSS file (Bitter & Lora). but i don't know How to change in funtions.php

Here is my Funtions.php font code:-

/**
 * Enqueue scripts and styles
 *
 * @since Cazuela 1.0
 */
function thsp_theme_scripts() {
    /*
     * Enqueue Google Fonts
     *
     * Check if fonts set in theme options require loading
     * of Google scripts
     */
    $theme_options = thsp_cbp_get_options_values();
    $theme_options_fields = thsp_cbp_get_fields();
    $body_font_value = $theme_options['body_font'];
    $heading_font_value = $theme_options['heading_font'];
    $body_font_options = $theme_options_fields['thsp_typography_section']['fields']['body_font']['control_args']['choices'];
    $heading_font_options = $theme_options_fields['thsp_typography_section']['fields']['heading_font']['control_args']['choices'];

    // Check if it's a Google Font
    if( isset( $body_font_options[$body_font_value]['google_font'] ) ) {
        wp_enqueue_style(
            'font_' . $body_font_value,
            'http://fonts.googleapis.com/css?family=' . $body_font_options[$body_font_value]['google_font']
        );
    }   
    // Check if it's a Google Font
    if( isset( $heading_font_options[$heading_font_value]['google_font'] ) ) {
        wp_enqueue_style(
            'font_' . $heading_font_value,
            'http://fonts.googleapis.com/css?family=' . $heading_font_options[$heading_font_value]['google_font']
        );
    }
    wp_enqueue_style( 'style', get_stylesheet_uri() );

Answer 1

I have registered google fonts in my theme function file, then used it in style.css.

function register_google_fonts() {

  wp_register_style( 'googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:400,300');
  wp_enqueue_style( 'googleFonts');

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

style.css

.cssClass {

    font-family: 'Open Sans', sans-serif;

}

 

First, theme will try to load the Google font Open Sans if not then use the next font sans-serif