Custom Fonts - non Google

Hi

I have tried to follow the existing threads on custom fonts but don't seem to succeed.
I have used the code Snippets Plugin to load 2 Snippets to upload custom fonts into Media Library.

1)
add_filter( 'upload_mimes', function( $mimes ) {
$mimes['woff'] = 'application/x-font-woff';
$mimes['woff2'] = 'application/x-font-woff2';
$mimes['ttf'] = 'application/x-font-ttf';
$mimes['svg'] = 'image/svg+xml';
$mimes['eot'] = 'application/vnd.ms-fontobject';

return $mimes;
} );

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

return $fonts;
} );

I have then used the Custom Fonts Plugin to set up the Regular version of the Font and then added the following CSS in the customiser CSS section

@font-face {
font-family: 'EuclidSquare';
font-style: normal;
font-weight: 400;
src: url(http://staging-carebasenet-staging.kinsta.cloud/wp-content/uploads/2023/02/EuclidSquare-Regular-WebS.woff2) format('woff2');

}

I wonder if you can help - thank you

Justin