I have an archive with font files. How to connect them correctly in style.css? What are the best practices?

Question

css

I have an archive with font files. How to connect them correctly in style.css? I want to know the best practices, what are the best practices? Inclusions and stuff

Answer 1

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'MiriadPro Regular';
  src:url('MiriadPro.eot');
  src:url('MiriadPro.eot?#iefix') format('embedded-opentype'),
    url('MiriadPro.woff') format('woff'), 
    url('MiriadPro.ttf') format('truetype'), 
    url('MiriadPro.svg#HeroicCondensedBold') format('svg'); 
}

Answer 2

font face

Answer 3

1) convert fonts here (you just need to select "expert" and set the necessary settings, such as Cyrillic, etc.)
2) connect the created file

Answer 4

Once upon a time I fiddled with this for a very long time in order to find a universal solution. Since then I've been using this scheme:
@font-face {
font-family: Myriad Pro;
src: url("../fonts/MyriadPro.eot");
src: url("../fonts/MyriadPro.eot?") format('eot');
src: local("Myriad Pro"), url("../fonts/MyriadPro.ttf");
}
@font-face {
font-family: Myriad Pro Bold;
src: url("../fonts/MyriadProBold.eot");
src: url("../fonts/MyriadProBold.eot?") format('eot');
src: local("Myriad Pro Bold"), url("../fonts/MyriadProBold.ttf");
}
And so on for each font. It works fine for me on all browsers (explorer doesn't count =)). Convert to eot herehttps://www.kirsle.net/wizards/ttf2eot.cgi