Custom CSS Oh My!

Rendering of the page on Windows (Chrome Beta 35 and IE 11 on Windows 7) has continued to anger and sadden me. However, it turns out that a little bit of CSS jiggery-pokery can provide a world of improvements: specifically activating kerning and ligature support in Chrome and kerning support in IE.

Code snippets were accumulated from Recap and Kerning posts from Elliott Jay Stocks’ blog.

Fee-fi-fo-fum—Ligatures and Typekit

Recent viewers may have noticed that Effra, as rendered on this site, had some ugly characteristics (especially fi). At first I had concluded that Effra simply lacked ligatures for the web but a more exhaustive investigation led me to understand that the issue is actually down to Typekit settings. Specifically, all characters need to be selected in the Kit Editor.

Sure enough, once updated (and changes propagated), the text renders tolerably well (at least on the current version of Safari for iOS).

Typekit trauma

I was tweaking the font styles in the Squarespace control panel and noticed that when I selected Typekit fonts they were falling back to the system default Serif font.

Step 1: Check whether the problem is with the domain name

When the Kit was created at Typekit’s website it was registered with koumparos.ca but not the underlying Squarespace name, so when changing the site it is not pulling the Typekit fonts.

Step 2: Add squarespace name to Kit

Go to Typekit.com, log in, select Typekit Editor then Kit Settings.

Add squarespace name to list of domains, and then save.

Wait a few* moments for the changes to propagate.

 

* Where ‘few’ is defined as ‘more than an impatient person would like’.

Frist Psot!

This is a boring note-to-self post to serve as a reminder of how I did things. For what it's worth, most posts will be boring notes to self.

First permanent image uploaded. The process was as follows:

1. Edit image (remove a couple of distracting scuffs);

2. Prepare image for web;

3. Add to Squarespace.

Editing involved loading a PNG version of the image in Inpaint 5 (handy single-purpose app to remove unwanted stuff from photos), highlighting the scuffs and then pressing a single button to fix the image. Saved back as PNG, and then reimported to Aperture.

Preparing for web involved creating a custom export format (JPG, Q11 (to shrink file below Squarespace’s 20 MB max), watermark) and then dropping the file on the desktop.

Adding to Squarespace was the easiest bit: went to the Images page, selected add image and then picked the file from the desktop.