[WordPress] Including Custom Fonts in WordPress Plugins

00-include-font.html

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

01-use-font.css

font-family: 'Roboto', sans-serif;

02-font-definition.css

@font-face {
    font-family: GothamLight;
    src: url("../fonts/Gotham-Light.otf") format("opentype");
}

@font-face {
    font-family: ThirstyScriptMedium;
    src: url("../fonts/ThirstyScriptMedium.otf") format("opentype");
}

03-using-custom-fonts.css

#search_keywords {
    background: #ffffff;
    color: #151335;
    font-family: 'GothamLight', sans-serif;
}

04-include-stylesheet.php

<?php

add_action('wp_enqueue_scripts', 'acme_enqueue_styles');
/**
 * Registers the stylesheet for the Acme Plugin Styles.
 */
function acme_enqueue_styles()
{
    wp_enqueue_style(
        'acme-visuals',
        plugin_dir_url(dirname(__FILE__)).'assets/css/public.css',
        [],
        rand(),
        'screen'
    );
}