What is the correct order for connecting a font of a different format?

Question

css

Please explain the correct order for connecting a font of different formats (eot, woff, woff2, otf, ttf, svg, local)
basically the order in which I listed above, but on https://developers.google.com/web/fundamentals /per... the order is reversed.
it seems that in the end the browser chooses only one format, but does the order of connecting fonts affect which font it stops at?

Answer 1

On this occasion, it is clearly written in this Google article that yes the order matters (but not the CSS cascade). The first supported font is taken. From myself I can add, I specifically checked this - it is. Put woff2 first - it will take it, well, or in your case eot for ie and woff the rest.

Answer 2

I always thought it didn't work

Answer 3

Perhaps Google knows something) if you specify local first, then when the font is in the system, it will not load again.

Answer 4

Cascading Style Sheet! That says it all. Connect 4 images using css in different formats

body {
background-image: url('img/img1.gif');
background-image: url('img/img1.jpg');
background-image: url('img/img1.png');
background-image: url('img/img1.webp');
}

Which of the bottom will eventually be displayed in the browser? Given that the browser understands all specified formats