@font-face does declaration doesn't follow the the fontspring bulletproof syntax

Frontend Web Development: The Big Nerd Ranch Guide Chapter 3: Styles
1

Screen Shot 2016-10-09 at 11.27.01 AM.png5120×2880 1.41 MB

I first noticed this in Chapter 3, though I have a second occurrence of the problem when working through Chapter 4: when writing the @font-face style block in my CSS, I get an error from CSSLint @font-face does declaration doesn't follow the the fontspring bulletproof syntax.

There is a URL in the tooltip when I click the orange dot. (http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/) This page describes the “new” (2011) format, but it doesn’t give me a clue as to what is wrong with my styling. The MDN page on @font-face wasn’t helpful either.

I am using Atom 1.10.2 on OS X El Capitan (10.11.6) and linter-csslint 1.3.3

Any thoughts?

2

Hey there - have had the same problem. From the fontsprint link you’ve included, it looks as though the ‘new’ format would like a question mark added so that this:

src: url('fonts/LAKESHOR-webfont.eot#iefix')...

looks like this:

src: url('fonts/LAKESHOR-webfont.eot?#iefix')...

At any rate, it’s made the warning disappear for me, and the page works as expected. Hope that helps!

3

@Thlayli: Thank you for your response.

As you can see in my screenshot, I do have the question marks. The linter complains about the font-style though I think it really complains about whatever is the last line. So it’s something more than question marks that I need to make this warning go away.

4

My apologies - I didn’t catch that in the screenshot. When I entered in my code, I had missed the question mark, and got the same complaint from the linter. Replacing it helped me.

But now that I have looked at your screenshot, I can help! Check your code for each of those lines (the embedded-opentype line); it looks like you’ve misspelt “embedded” in each tag. The first one needs an extra letter ‘d’, and the other needs the whole word, instead of just ‘embed’.

I hope that fixes it!

5

Typing is hard.

I’m surprised that the linter wasn’t more helpful; it would have been nice to have some kind of “did you mean?”

You suggestion solved my problem. Thank you!

6

Wasn’t able to get to this forum to find an answer. I installed the TTF font into the FontBook app on Mac. I then was still having the font not show up. I went into FontBook and looked closer to find the actual name of the font “lakeshoredrive” which I put in the .logo-text class for font-family and was then able to see the font on the web page. Sure this is a localhost hack, but it worked. I will go back and check removing the ? to see if that is a fix as well. Happy Coding!

7

Hi @awakekat! Just a headsup, sounds like something else is fishy. The purpose of @font-face is for the browser to be able to use a font that is not installed in FontBook. Otherwise, everyone who comes to the site would need to install that font to use the page.

To debug this, go ahead and uninstall lakeshoredrive from FontBook, then refresh Chattrbox and look for network errors in the Chrome developer console. Does anything show up?