font-face fonts are not loading - Failed to decode downloaded font, OTS parsing error: invalid version tag

Can you please help me work out why the font-face fonts are not loading?

http://bs.petewinter.com/fonts2/demo.html

Console log says...

Failed to decode downloaded font
OTS parsing error: invalid version tag

but I'm not sure how to resolve?
petewinterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Tough to follow your code.

To debug.

Setup a simple html file with a single font + all CSS inline.

Likely this will help you figure out what's occurring.

Most reports about this problem seem due to a slightly incorrect path to font files.

Here's an example of one broken font lookup...

imac> curl -I -L http://bs.petewinter.com/fonts2/BarronMicroBookItalic_1.woff2
HTTP/1.1 301 Moved Permanently
Date: Sat, 03 Nov 2018 15:28:36 GMT
Server: Apache
Location: http://bs.petewinter.com/
Content-Type: text/html; charset=iso-8859-1

HTTP/1.1 200 OK
Date: Sat, 03 Nov 2018 15:28:36 GMT
Server: Apache
Link: <http://bs.petewinter.com/wp-json/>; rel="https://api.w.org/", <http://bs.petewinter.com/>; rel=shortlink
Content-Type: text/html; charset=UTF-8

Open in new window


Notice referencing your font file, redirects to your domain (with font path stripped), which will return the content of your domain as the BarronMicroBookItalic_1.woff2 to your browser... which will 100% certainly cause a parsing error, because your site HTML is not a woff2 file.

So fix your font paths (using curl to debug) + likely all issues will resolve.
petewinterAuthor Commented:
Thanks for the reply.

Here is a simplified file: http://bs.petewinter.com/fonts2/demo2.html

Sorry, but I do not understand curl.

Does that mean fonts are corrupt?
petewinterAuthor Commented:
Another even more simplified version: http://bs.petewinter.com/fonts3/demo2.html
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Same problem. Look closely at the following.

imac> curl -I -L http://bs.petewinter.com/fonts3/Barron-Black-webfont2.woff
HTTP/1.1 301 Moved Permanently
Date: Sat, 03 Nov 2018 16:28:28 GMT
Server: Apache
Location: http://bs.petewinter.com/
Content-Type: text/html; charset=iso-8859-1

HTTP/1.1 200 OK
Date: Sat, 03 Nov 2018 16:28:28 GMT
Server: Apache
Link: <http://bs.petewinter.com/wp-json/>; rel="https://api.w.org/", <http://bs.petewinter.com/>; rel=shortlink
Content-Type: text/html; charset=UTF-8

Open in new window


You can't have a woff2 file redirect to a non woff2 link.

The way you have your page setup, the browser is requesting a woff2 file + you're redirecting this to an HTML page.

woff2 != HTML

You must fix this before your code will work.
petewinterAuthor Commented:
Thanks for the reply. It must be server setting related problem...

Same folder on two different servers...

On my server: http://bs.petewinter.com/fonts4/demo.html

On another server: http://www.barronsalon.com/fonts4/demo.html

Any idea's what is could be?
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Ah... another problem...

You've polluted your browser cache with...

http://bs.petewinter.com/fonts3/Barron-Black-webfont2.woff -> 301 redirect -> http://bs.petewinter.com

Open in new window


Browsers cache 301s forever, so first thing... Get rid of every trace of a 301 redirect. Likely best to get rid of all redirects.

If you must use a redirect, only use 302s, as 302s aren't browser cached.

After you've removed all 301s from your site config, you'll have to manually flush your browser cache to get rid of the cached 301s. Some browser versions will require you to access internal tables of browser to do this... If you're running a current browser, a cache flush will likely be sufficient.

Absolute Rule: Never, ever, ever use 301s for any dev work, as one minor bug in your logic will cause all sorts of headaches to fix.

Tip: Use curl to determine when your 301 problem is fixed, as curl has no browser cache to fight against you.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Best you use curl to figure all this out.

Fairly simple, just super time consuming.

If you get stumped, might be worth hiring someone to assist you.
petewinterAuthor Commented:
I have never used curl? How do I use it. Can you send me a link to a guide please?
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Just look above for an example of how to use curl to debug your redirect chain.

You'll have to search for the correct way to install curl on your specific OS.

Normally most Linux Distros + OSX (Macs) provide curl by default. For Windows, you'll have to find a curl executable you're comfortable installing or build from source.
petewinterAuthor Commented:
Many thanks David
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.