Embedded Font Styling - Embedded Font Styles vs CSS Styling [duplicate] - css

Question

This question already has answers here:
Multiple font-weights, one #font-face query
(5 answers)
Closed 6 years ago.
I'm hoping to understand what the difference is between embedding fonts in a site like this:
#font-face {
font-family: 'Kulturista Medium';
src: url('fonts/Kulturista Medium.eot');
src: local('☺'), url('fonts/Kulturista Medium.woff') format('woff'), url('fonts/Kulturista Medium.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Kulturista Semibold';
src: url('fonts/Kulturista Semibold.eot');
src: local('☺'), url('fonts/Kulturista Semibold.woff') format('woff'), url('fonts/Kulturista Semibold.ttf') format('truetype'), url('fonts/Kulturista Semibold.svg') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Kulturista Semibold Italic';
src: url('fonts/Kulturista Semibold Italic.eot');
src: local('☺'), url('fonts/Kulturista Semibold Italic.woff') format('woff'), url('fonts/Kulturista Semibold Italic.ttf') format('truetype'), url('fonts/Kulturista Semibold Italic.svg') format('svg');
font-weight: normal;
font-style: normal;
}
vs. just loading one single font like this
#font-face {
font-family: 'Kulturista';
src: url('fonts/Kulturista.eot');
src: local('☺'), url('fonts/Kulturista.woff') format('woff'), url('fonts/Kulturista.ttf') format('truetype'), url('fonts/Kulturista Medium.svg') format('svg');
font-weight: normal;
font-style: normal;
}
and styling with CSS
body {
font-family: 'Kulturista', Fallback, sans-serif;
font-style: italic;
font-weight: bold;
}
I imagine there's a benefit, otherwise you wouldn't want to load more resources.

Answer 1

Browsers read different types of font, so by using them all you can cover all the browsers, being cross-browser
TTF and OTF
They are supported in all modern browsers, except for Internet Explorer, for which they are only partially supported.
WOFF
it is supported by almost all browsers except older versions of Android Browser and older versions of iOS Safari.
EOT
is a font file type only supported by Internet Explorer, and works on versions Internet Explorer 8 and above
Regarding your main issue, using your 1st example is the best approach since changing the font-weight and font-style declarations of each #font-face rule to match each font’s properties, and using the same font-family name for each rule, we will no longer need to be overly specific in the CSS file.
You can read more here