Recently, I've been utilizing this specific model
@font-face {
font-weight: WEIGHT;
font-style: STYLE;
font-family: 'NAME';
src: url('font.eot');
src: url('https://dl.dropboxusercontent.com/s/dey3lzjdpgszxzt/myriad-webfont.eot?#iefix') format('eot'),
url('font.woff') format('woff'),
url('font.ttf') format('truetype'),
url('font') format('svg'); }
and
font: SIZE "NAME", FALLBACK, GENERIC FAMILY;
However, I have received a caution that this method may not be the most optimal as it deviates from the "Bulletproof syntax", which was eventually declared outdated due to an issue in IE <9 and was revised three years ago by Fontspring.
Is the latter approach still considered flawless or has it also become outdated?
CSS-Tricks recently suggested that utilizing
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
should suffice, although without addressing compatibility with IE <9.
What is deemed the best practice and is there truly a bulletproof solution?