search

jsdelivr / bootstrapcdn

Free Bootstrap CDN hosting
https://www.bootstrapcdn.com
MIT License
1.34k stars 261 forks source link

Glyphicons not loading in Bootswatch 3.3.4 #527

Closed maxrabin closed 9 years ago

maxrabin commented 9 years ago

After upgrading from Bootswatch 3.3.2 to 3.3.4 ("United" theme) the glyphicons no longer load.

jenil commented 9 years ago

It doesn't work for any of the themes I am guessing.

maxrabin commented 9 years ago

@jenil27 I tried a couple others, also experienced the issue there.

jenil commented 9 years ago

Same here, reported this on Twitter the other day.

jmervine commented 9 years ago

Looking in to this, apologies for the delay.

jmervine commented 9 years ago

I'm having trouble understanding how this is an issue with BootstrapCDN and have reached to to the bootswatch maintainers in https://github.com/thomaspark/bootswatch/issues/427. Thank you for your patience.

jmervine commented 9 years ago

Okay, it would appear that there was an update to bootswatch v 3.3.4+1 that I was unaware of. This should now be fixed, see:

http://public.mervine.net/bootswatch.html

Thanks, and again, apologies for the delay.

jenil commented 9 years ago

Thanks @jmervine :+1:

genichyar commented 9 years ago

@jmervine , in http://public.mervine.net/bootswatch.html there is loading standard bootstrap then bootswatch theme:

<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css" rel="stylesheet">
</head>

if I use only bootswatch the problem repeats.

maxrabin commented 9 years ago

@jmervine its not fixed. Like @genichyar said, if you remove the loading of the standard bootstrap via inspector, you see that most icons are not loading.

jenil commented 9 years ago

I am sorry, I didn't see that, yes the issue still persist.

jmervine commented 9 years ago

That is the case, I was able to reproduce that. I'm using the exact files from bootswatch here. @thomaspark do you have any advice on how to proceed?

jmervine commented 9 years ago

Troubleshooting in the open here:

http://public.mervine.net/bootswatch-orig.html << works w/ bootswatch.com reference http://public.mervine.net/bootswatch-only.html << doesn't w/ maxcdn.bootstrapcdn.com reference

I diff'ed the bootstrap.css files from both hosts and they're identical.

When I load bootswatch-orig.html, the network tab shows only glyphicons-halflings-regular.woff2 being loaded.

When I load bootswatch-only.html, the network tab shows glyphicons-halflings-regular.woff2, glyphicons-halflings-regular.woff and glyphicons-halflings-regular.ttf being loaded.

The only difference I see, between the two is the Content-Type header for the woff2 font, which is application/octet-stream, as opposed to application/font-woff2.

$ curl -sI https://bootswatch.com/fonts/glyphicons-halflings-regular.{eot,svg,ttf,woff,woff2} | grep "Content-Type"
Content-Type: application/vnd.ms-fontobject
Content-Type: image/svg+xml
Content-Type: application/x-font-ttf
Content-Type: application/x-font-woff
Content-Type: application/octet-stream

$ curl -sI https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/fonts/glyphicons-halflings-regular.{eot,svg,ttf,woff,woff2} | grep "Content-Type"
Content-Type: application/vnd.ms-fontobject
Content-Type: image/svg+xml
Content-Type: application/x-font-ttf
Content-Type: application/font-woff
Content-Type: application/font-woff2
jenil commented 9 years ago

Okay, just fiddling around and got this:

➤ curl -I http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/fonts/glyphicons-halflings-regular.ttf
HTTP/1.1 200 OK
Date: Tue, 24 Mar 2015 07:58:53 GMT
Content-Type: application/x-font-ttf
Content-Length: 58224
Connection: keep-alive
Last-Modified: Wed, 18 Mar 2015 05:37:03 GMT
ETag: "2540d7deed4f919086d273885bb430f8"
Server: NetDNA-cache/2.2
Expires: Fri, 18 Mar 2016 07:58:53 GMT
Cache-Control: max-age=31104000
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
X-Hello-Human: You should work for us! Email: jdorfman+theheader@maxcdn.com or @MaxCDNDeveloper on Twitter
X-Cache: HIT
Accept-Ranges: bytes

jenil@jg:~
➤ curl -I http://maxcdn.bootstrapcdn.com/bootswatch/3.3.2/fonts/glyphicons-halflings-regular.ttf
HTTP/1.1 200 OK
Date: Tue, 24 Mar 2015 07:59:02 GMT
Content-Type: application/octet-stream
Content-Length: 45404
Connection: keep-alive
Last-Modified: Mon, 26 Jan 2015 18:13:17 GMT
ETag: "e18bbf611f2a2e43afc071aa2f4e1512"
Server: NetDNA-cache/2.2
Expires: Fri, 18 Mar 2016 07:59:02 GMT
Cache-Control: max-age=31104000
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
X-Hello-Human: You should work for us! Email: jdorfman+theheader@maxcdn.com or @MaxCDNDeveloper on Twitter
X-Cache: HIT
Accept-Ranges: bytes

jenil@jg:~
➤ curl -I http://maxcdn.bootstrapcdn.com/bootswatch/3.3.1/fonts/glyphicons-halflings-regular.ttf
HTTP/1.1 200 OK
Date: Tue, 24 Mar 2015 07:59:18 GMT
Content-Type: application/octet-stream
Content-Length: 41236
Connection: keep-alive
Last-Modified: Wed, 17 Dec 2014 19:12:00 GMT
ETag: "47da44498fc073d9fff9ab0cdb0bef8e"
Server: NetDNA-cache/2.2
Expires: Fri, 18 Mar 2016 07:59:18 GMT
Cache-Control: max-age=31104000
Vary: Accept-Encoding
Access-Control-Allow-Origin: *
X-Hello-Human: You should work for us! Email: jdorfman+theheader@maxcdn.com or @MaxCDNDeveloper on Twitter
X-Cache: HIT
Accept-Ranges: bytes
jenil commented 9 years ago

Hey @jmervine

Should you try copying the fonts from https://github.com/twbs/bootstrap and try?

jmervine commented 9 years ago

Using https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a as reference for mime type on the woff2 font.

Think about the correct mime type for WOFF 2.0 files (Google uses font/woff2. W3C recommends application/font-woff2)

I'm not thinking it's the mime type due to the fact that running the same curl test as above on the standalone bootstrap files yields:

$ curl -sI https://maxcdn.bootstrapcdn.com/bootstrap/latest/fonts/glyphicons-halflings-regular.{eot,svg,ttf,woff,woff2} | grep "Content-Type"
Content-Type: application/vnd.ms-fontobject
Content-Type: image/svg+xml
Content-Type: application/x-font-ttf
Content-Type: application/font-woff
Content-Type: application/font-woff2

And note that http://public.mervine.net/bootstrap.html is loading correctly.

@jenil27 I hesitate to copy over what @thomaspark has provided when it's working on www.bootswatch.com, but it might be worth a quick test.

jmervine commented 9 years ago

@jenil27 Interesting RE the curl's you posted. From what I've read application/octet-stream can cause issues on some browsers and that's was oversight. AWS S3, sadly, requires that I update the Content-Type header value after each new file upload. I won't be on S3 for much longer though.

jmervine commented 9 years ago

Okay, I copied the fonts from maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts to maxcdn.bootstrapcdn.com/bootswatch/3.3.4/fonts and that appears to have fixed the issue. See: http://public.mervine.net/bootswatch-only.html. Additionally, I noticed upon copying that the file sizes changed.

As such, I'm going to consider this closed.

However, it's still odd to me that http://public.mervine.net/bootswatch-orig.html works, considering the previous fonts I had @ maxcdn.bootstrapcdn.com/bootswatch/3.3.4/fonts were copied directly from bootswatch.com/fonts.

@thomaspark if you have any idea's I'd love to get to the bottom of that.

jenil commented 9 years ago

Interesting, so copying the files did work. The fonts at Bootswatch are copied from Bootstrap itself (I guess) and they are working fine on the site as well as my local copy. Wondering what the issue was.

maxrabin commented 9 years ago

It works!

genichyar commented 9 years ago

thank you @jmervine !

But the bug still repeats when I using https.

Also when I use min version https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css there is old version (not "3.3.4+1")

jmervine commented 9 years ago

@genichyar odd, it's a cache issue on the cdn, purging now, but /bootswatch/3.3.4/cerulean/bootstrap.min.css, specifically has already been purged and should now be good. Glad I checked back one last time before going off to bed.

jmervine commented 9 years ago

Okay, all's purged. Please let me know if you're seeing any additional issues, either here or by tweeting @mervinej.

Cheers!

genichyar commented 9 years ago

Thank you. Min version is good. Unfortunately in https version the bug with glyphicons still repeats (It works good in http).

lightheaded commented 9 years ago

Issue repeating on 3.3.5 rendering it unusable.

jdorfman commented 9 years ago

I see what is happening. I am going to investigate why the content-types are wrong. For example:

jdorfman commented 9 years ago

I put in a hot fix and you should be good to go:

$ icurl -s https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/fonts/glyphicons-halflings-regular.woff2 |grep Content-Type
Content-Type: application/font-woff2

$ icurl -s https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/fonts/glyphicons-halflings-regular.woff |grep Content-Type
Content-Type: application/font-woff

$ icurl -s https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/fonts/glyphicons-halflings-regular.ttf |grep Content-Type
Content-Type: font/ttf

$ icurl -s https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/fonts/glyphicons-halflings-regular.svg |grep Content-Type
Content-Type: image/svg+xml

$ icurl -s https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/fonts/glyphicons-halflings-regular.eot |grep Content-Type
Content-Type: application/vnd.ms-fontobject

@jmervine and I will find out why this keeps happening.

absolom commented 9 years ago

I am having this problem using http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css on an iPad. Dropping down to 3.3.4 seems to fix the issue.