Embedded Font Styling - Embedded Font Styles vs CSS Styling

Question

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.

dippas · Accepted Answer · 2016-09-21T03:42:49.643

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

Embedded Font Styling - Embedded Font Styles vs CSS Styling

1 Answers1