Why is my css showing ��?

Question

System details:
Server: Apache, Ubuntu 16.02
Client: Windows 10, Chrome

My apache config file looks as follows:

<VirtualHost *:80>
       ServerName mycoolsiteA.mydomain.com
       ServerAlias mycoolsiteB.mydomain.com

       Alias /static /var/www/python/mysite/static
       Alias /templates /var/www/python/mysite/templates

       WSGIDaemonProcess my_app user=www-data group=www-data threads=5
       WSGIScriptAlias / /var/www/python/mysite/start.py
       WSGIScriptReloading On

       <Directory /var/www/python/mysite>
               WSGIProcessGroup my_app
               WSGIApplicationGroup %{GLOBAL}
               order deny,allow
               Allow from all
       </Directory>
</VirtualHost>

When I load the css in a browser it is showing the following. However, this is quite random. It "sometimes" works, and sometimes does not.

My example url is this: https://mycoolsiteA.mydomain.com/static/css/bs/bootstrap.min.css

We do have a Firewall appliance which auto-redirects http to https, but I'm loading the css directly with https.

And the result looks like this:

Yet, if I refresh several times, or add a r=number on the end, it will clear the cache and load. But, it will do it again randomly until I clear the cache again.

Here it is loaded and working:

Any thoughts, direction on where to look to fix this?

Do you have access to the server logs? Maybe there is something of interest on the server-side going on. — , Jul 07 '17 at 14:14
@jdv I looked at the apache logs and nothing. Not even a hint to an error, or anything that would cause this. — CodeLikeBeaker, Jul 07 '17 at 14:15
check the character encoding of your raw CSS file. Ensure it is UTF-8 without a BOM. — Martin, Jul 07 '17 at 14:16
check your HTTP server is providing the correct headers of the CSS files — Martin, Jul 07 '17 at 14:21
@Martin https is handled via the firewall. So that's why it's setup like this — CodeLikeBeaker, Jul 07 '17 at 14:30
try chaging `:80` to `:443` and see if it helps. Also clear your browser history too. — Martin, Jul 07 '17 at 14:31
What does the source code of the CSS file look like? I think the issue is yur HTTPS firewall somehow.... — Martin, Jul 07 '17 at 14:34

score 8 · Accepted Answer · answered Jul 07 '17 at 14:36

Welcome to the fun world of UTF-8!

I've seen this dozens of times in PHP (see UTF-8 all the way through). What you're experiencing is almost certainly a UTF-8 file being delivered as some other character encoding (or vice-versa). I downloaded Bootstrap and Notepad++ identifies them as ANSI encoded. Your web server might be forcing that to use UTF-8. Look at the response headers for something like this

Content-Type: text/css; charset=UTF-8

So your web server is saying it's UTF-8 but it's really not. At which point your browser starts vomiting out �, meaning it doesn't recognize the character.

There's a couple of ways to deal with this if that's the case.

Re-encode the file as UTF-8 (Notepad++ can do this for you)
Stop passing a default UTF-8. Your browser will try to identify the encoding

Just for kicks, try loading the CSS directly from the MaxCDN servers

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

They do not pass a UTF-8 header

Why is my css showing ���?

1 Answers1

Why is my css showing ��?