Implement Custom Font

Hello,

how i can add a custom font for child theme in a true way.
I have a fonts folder with my custom fonts.
example:
/fonts/Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold
/fonts/fonts.css

@font-face {
	font-family: 'Gilroy-Light';
	src: url('./Gilroy-Light.eot');
	src: url('./Gilroy-Light.eot?#iefix') format('embedded-opentype'),
		url('./Gilroy-Light.woff') format('woff'),
		url('./Gilroy-Light.ttf') format('truetype'),
		url('./Gilroy-Light.svg#Gilroy-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy-Regular';
	src: url('./Gilroy-Regular.eot');
	src: url('./Gilroy-Regular.eot?#iefix') format('embedded-opentype'),
		url('./Gilroy-Regular.woff') format('woff'),
		url('./Gilroy-Regular.ttf') format('truetype'),
		url('./Gilroy-Regular.svg#Gilroy-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy-Medium';
	src: url('./Gilroy-Medium.eot');
	src: url('./Gilroy-Medium.eot?#iefix') format('embedded-opentype'),
		url('./Gilroy-Medium.woff') format('woff'),
		url('./Gilroy-Medium.ttf') format('truetype'),
		url('./Gilroy-Medium.svg#Gilroy-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy-Semibold';
	src: url('Gilroy-Semibold.eot');
	src: url('Gilroy-Semibold.eot?#iefix') format('embedded-opentype'),
		url('Gilroy-Semibold.woff') format('woff'),
		url('Gilroy-Semibold.ttf') format('truetype'),
		url('Gilroy-Semibold.svg#Gilroy-Semibold') format('svg');
	font-weight: 600;
	font-style: normal;
}

add to function this css

function gpc_css_stylesheets() {
	wp_enqueue_style( 'gp_font', get_stylesheet_directory_uri() . '/fonts/fonts.css');
}
add_action('wp_enqueue_scripts','gpc_css_stylesheets');

I want to add this fonts to a customizer with choice font weight.
For example:
Ill choice a font family like Gilroy then select a font weight, 300 - Light, 400 - Regular, 500 - Medium, 600 - Semibold.
What i need to change in fonts.css for working solution ?

I add this in function to show font in a customizer, but im not sure its true way or not. In this case i need to add all fonts Gilroy-Light, Gilroy-Regular, Gilroy-Medium, Gilroy-Semibold, Gilroy-Bold or just one like Gilroy, then use a font weight ? Or for any font weight use specific name ?

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