Category Archives: CSS

Web fonts not loading in Firefox

I encountered a peculiar issue today regarding web fonts on firefox. On all browsers except Firefox the web fonts were loading correctly. I found multiple references suggesting that Firefox was picky with using quotes when referencing where the font file is hosted. However my findings were more interesting:

Firefox does not support embedding webfont files from a different domain

The good news is the fix is simple. Simply send the following header:

Access-Control-Allow-Origin *

CSS grid layouts using HashGrid

Just a heads up to anyone who’s planning on designing their next project using a grid. The folks over at Analog have created a nifty little tool called Hashgrid to overlay a grid over your web page like so:

Installation is pretty simple but I ran into a couple of minor issues which hopefully can be remedied in a future version:

  • The negative margin in the example is half the width of your grid, and whilst that’s probably obvious it may be worth adding a comment in the CSS on hashgrid.com just to make that clear
  • I had to add a high z-index to the #grid in the CSS to make sure it correctly overlayed my page. If your grid isn’t showing this is probably why.

The hardest part is creating the grid image in photoshop. The quickest way I found to do this is with the selection tool and guides. Once you’ve created your guides it takes a few seconds to use the line tool to draw over your guides. If I get some time I might create a quick tool to generate dynamic grid images unless the hashgrid folks want to beat me to it ;)