Custom font not showing up in customizer on backend.

I downloaded a font from Myfonts and am currently trying to get it to show in the customizer typography dropdown options.

I uploaded font to my child theme folder structure. I successfully placed those correctly because when the url is clicked on - the font files download and I can change the heading/body tags via css.

However, the font wont show up in the customizer section drop-downs for typography. Any idea why?

The font also seems to be loading on the front end, but not on the backend when editing in customizer. Any way to change that as well?

CSS in Additional CSS

@font-face {
    font-family: "NHaasGroteskDSPro75Bd";  
    src: url('http://tccrocksbuild.wpengine.com/wp-content/themes/generatepress_child/Fonts/NHaasGroteskDSPro75Bd.woff2') format('woff2'), url('http://tccrocksbuild.wpengine.com/wp-content/themes/generatepress_child/Fonts/NHaasGroteskDSPro75Bd.woff') format('woff');  
}

PHP in Functions.php in child theme

add_filter( 'generate_typography_default_fonts', 'tu_add_system_fonts' );
function tu_add_system_fonts( $fonts ) {
    $fonts[] = 'NHaasGroteskDSPro75Bd';
    return $fonts;
}

URL: https://tccrocksbuild.wpengine.com