Symbol fonts on Squarespace

I was trying to get wonderful Symbolset to work on a speedy Squarespace site, without luck.

Squarespace 6 puts all your uploads on a separate file server (so they can use a content delivery network to send them out all fast, I guess), but webfonts must live on the same server as your webfiles (or Firefox won’t load them). It was late, I couldn’t figure it out, and the net was empty of blog posts telling me how to do it.

Luckily, my eye caught upon an icon in Squarespace’s default slideshow buttons. Firebug revealed its font-family name (‘squarespace-ui-font’) and Google delivered a Github repository containing that whole font (as well as ‘social-icon-font’).

Downloading the repo and opening up the font files in FontExplorer, I found the unicode characters for each of the built-in icons.

SO, if you’re building a Squarespace site, you might not need your own icon font — if you can use one of their symbols, you can just use their CSS!

font-family: 'squarespace-ui-font';  
font-style: normal;  
font-weight: normal;  
-webkit-font-smoothing: antialiased;  
display: inline-block;  
vertical-align: middle;  
speak: none;  
content: "\e02d";

Put it on a pseudo :before or :after element, so you can use the “content” property, and then just drop in the new unicode character.

I used their right arrow plus a css3 rotation to do the diagonal arrows on the site for this awesome coloring book of street art.