How to load fonts before content?

Question

css

hello, please tell me how to load the fonts before the content? Google shows this all the time but I can't figure out how to do it

https://site.ru/js/awesome/webfonts/fa-solid-900.woff2
https://site.ru/js/awesome/webfonts/fa-regular-400.woff2
https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2

and t.l
I did so it doesn't work

@font-face {
font-family: 'opensans';
font-display: auto;
src: local('opensans'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2) format('woff2');
src: local('roboto'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
}

Answer 1

smoky-jo , outputs something to the console? open and look at your browser's devTools and see if the fonts are included, click on the links you have included

@font-face {
font-family: 'opensans';
src: url("https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOVuhpOqc.woff2") format('woff2');
}
@font-face {
font-family: 'roboto';
src: url("https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2") format('woff2');
}