Add the font-face rules in the correct order to have the desired result. Smaller font size first, font style normal before italic. Check the example below.

Copy Code 


@font-face {
    font-family: 'Libre Baskerville';
	src: local('☺'), url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'Libre Baskerville';
	src: local('☺'), url('../fonts/LibreBaskerville-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
    font-display: swap;
}

@font-face {
	font-family: 'Libre Baskerville';
	src: local('☺'), url('../fonts/LibreBaskerville-Bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
    font-display: swap;
}
Topics: CSS