Adding custom font Geometos (otf/ttf only)

Dear GP Team,

I have just followed your instructions on how to host a custom font locally.
However, it still doesn't show up in the typography/customizer. I'm not using a child theme though
I have simply added the additional CSS in the customizer (see below). What do I miss?

Many thanks in advance for your support!

/* Geometos */
@font-face {
font-family: 'Geometos';
font-style: normal;
font-weight: 400;
src: local(''),
url('XXX/wp-content/uploads/2021/03/geometos.ttf') format('truetype'), /* Safari, Android, iOS */
url('XXX/wp-content/uploads/2021/03/geometos.otf') format('opentype')
}
add_filter( 'generate_typography_default_fonts', function( $fonts ) {
$fonts[] = 'Geometos';
return $fonts;
} );