Bullet Proof font-face syntax not so correct #10488

Open
vijayaraghavanramanan opened this Issue Jan 7, 2017 · 7 comments

Projects

None yet

2 participants

@vijayaraghavanramanan

The bullet proof font-face syntax downloads eot for IE 11 when it should actually be downloading woff.

The most accurate font-face syntax is with eot as source in the first line (no "fix") and the src in the next line starting with local('FontAwesome')

@tagliala
Member
tagliala commented Jan 8, 2017 edited

Hi,

thanks for this report.

IE11 wasn't released when the original bullet proof syntax was proposed (2010). Unfortunately, we must provide compatibility from IE8+ so we can't drop the .eot format.

It would be interesting to check if the BrowserStack tool could help us in providing an up to date bullet proof font face syntax for modern browsers

This issue is strictly related to #10470, I would keep discussing this there, so please share your thoughts there

edit: rethought, let's keep this open too

@tagliala tagliala closed this Jan 8, 2017
@tagliala tagliala reopened this Jan 8, 2017
@vijayaraghavanramanan

Not asking for removal of IE 8 support. All for keeping it.

The correct syntax is in which the second line has a local('FontAwesome'), as the first thing for src and immediately followed by woff2. Eot appears in the src in the first line.

@vijayaraghavanramanan

Yeah that's right. Although, the smiley is not necessary. Local-anything will do. But to prevent clashes with locally installed font names or for the case where local fonts may be an old version, smiley is better.

@tagliala
Member
tagliala commented Jan 8, 2017

Problem is: we cannot use FontAwesome to avoid conflict with older version, as you said.

Also: the date of the post should be 5th May 2010, but we have this note here: https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/

May 12th, 2010. If you’re looking to just put @font-face to use today, just head to FontSquirrel’s generator. It is an indispensible tool when implementing @font-face. If you want to know more about some of the why’s, carry on…

I've just checked FontSquirrel's generator and it still uses fontawesome's approach.

It is definitely interesting improve the font face declaration but we should know each side effect we could run into

@vijayaraghavanramanan

What I actually meant about old version is this: suppose I use local('FontAwesome') and some browser user has Font Awesome installed locally on his/her machine and it's not updated. Then new icons may not appear.

But that still leaves the smiley option open and should work. Needs some tests I'd agree with that.

Maybe would should ask Paul Irish. I think he may not be aware that IE11 loads the eot instead of woff.

@tagliala
Member
tagliala commented Jan 8, 2017 edited

Maybe would should ask Paul Irish. I think he may not be aware that IE11 loads the eot instead of woff.

I would give a try. Also, guys at Font Squirrel may be interested in improving their actual font-face declaration

@tagliala tagliala added the @font-face label Jan 10, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment