Chrome Archives - Andrew King

I ran into an issue a few days ago where I couldn’t get through to my work’s git server from Safari, but Chrome was able to access it fine.

I assumed the problem was in Safari, and tried resetting Safari preferences and clearing caches, but that didn’t work. I also edited my hosts file recently, which has been a cause of this complaint for other users, but nothing in that was out of the ordinary either.

The culprit: Charles Proxy.

I use Charles Proxy regularly for work. Charles is a great tool and all, but it makes changes to your computer’s network settings and doesn’t always clean up after itself. It functions by operating a proxy server on your local machine so that you can observe traffic and debug your networking code.

Specifically, it sets up a global proxy in macOS’s native System Preferences > Network. It’ll go into whichever network is currently active, go to the Advanced options and enter the details.

In order to maintain access to the internet after the proxy stops, these values need to be removed. In its normal shutdown process, Charles will usually switch these back. But if it crashes they don’t get cleaned up. Just go in and uncheck the proxies that are enabled.

These proxies can also be set on VPN networks that are listed in the System Preferences.

Font Awesome is awesome, except that it doesn’t work with Mozilla Firefox or Google Chrome out of the box (see what I did there?). So if you’re seeing little squares instead of the icons you’re expecting, here’s the solution.

Open the .htaccess file for your site and add the following code:

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

This is a great snippet that I found here.

If you don’t already have an .htaccess file, create one in the root directory of your site. It is a plain text file and must be called exactly “.htaccess” (no that’s not just the file extension). I’m using WordPress so this is what my .htaccess file looks like now:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

<FilesMatch ".(ttf|otf|eot|woff)$">
 <IfModule mod_headers.c>
 Header set Access-Control-Allow-Origin "*"
 </IfModule>
</FilesMatch>
# END WordPress

Refresh your browser and your icons should now appear.

If this doesn’t work, make sure you don’t have another copy of font awesome installed. This could happen, for example, if you are using WordPress and you installed a fontawesome plugin, or if you tried uploading a newer version in some previous frustrated attempt to fix this.

Tag: Chrome

Solved – Safari can’t load page but Chrome can through VPN

Font Awesome Doesn’t Work with Firefox – SOLVED