Fallback font

Hey there.

I've just hosted the Google fonts locally on my webserver by using the customizer option and the code snippet plugin to show it in the typography list.

In the code snippet plugin, I added the following below code and selected (Run snippet everywhere)

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Poppins';

return $fonts;
} );

And in the customizer I've added the following CSS:

@font-face {
font-family: 'Poppins';
src: url('https://example.com/wp-content/uploads/fonts/Poppins-Regular.woff2') format('woff2'),
url('https://example.com/wp-content/uploads/fonts/Poppins-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Poppins';
src: url('https://example.com/wp-content/uploads/fonts/Poppins-Bold.woff2') format('woff2'),
url('https://example.com/wp-content/uploads/fonts/Poppins-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;

My questions are:

1- How can I show the fallback font in case this font failed to load?
2- Want to make sure is everything is good without coding errors?

Best regards :)