Custom Font Issue

so I am trying to load 2 fonts norwester and kollektif I have add a folder to my child theme with the font files and then added the css in the customizer ( would really like to added it to the child theme instead but it seems to only work when its in the customizer could be part of my issue?) The norwester one is loading correctly on the home page but not on any other page ( just want the primary menu to be in this font the other kollektif I don’t know what I am doing wrong but its not loading at all.

This is the code I am adding:

@font-face {
font-family: ‘norwester’;
src: url(‘wp-content/themes/Vccid Theme/fonts/Vccid-heading-font/vccid-heading-font-webfont.woff2’) format(‘woff2’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-heading-font/vccid-heading-font-webfont.woff’) format(‘woff’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-heading-font/vccid-heading-font-webfont.ttf’) format(‘truetype’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-heading-font/vccid-heading-font-webfont.svg#norwesterregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘kollektif’;
src: url(‘wp-content/themes/Vccid Theme/fonts/Vccid-body-font/kollektif-webfont.woff2’) format(‘woff2’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-body-font/kollektif-webfont.woff’) format(‘woff’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-body-font/kollektif-webfont.ttf’) format(‘truetype’),
url(‘wp-content/themes/Vccid Theme/fonts/Vccid-body-font/kollektif-webfont.svg#kollektifregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

and then in my functions file I have added this:

add_filter( ‘generate_typography_default_fonts’, function(
$fonts ) {
$fonts[] = ‘norwester’;
return $fonts;
} );

add_filter( ‘generate_typography_default_fonts’, function(
$fonts ) {
$fonts[] = ‘kollektif’;
return $fonts;
} );