The time my custom webfonts stopped working in Chrome and Firefox

When I last rebuilt erica-schultz.com back in 2012, I decided to incorporate a custom webfont in my Design and Judaica sections. In the interest of cross-browser compatibility, I used FontSquirrel’s free Webfont Generator to export EOT, SVG, and WOFF files, which I then called in my CSS @font-face declaration.

Fast forward to late 2016: I discovered that while my font still looked nice in Safari, it had stopped working in Chrome and Firefox. They had apparently gone and changed their font rendering in a way that broke my site. THANKS DUDES.

This week, I finally did a little research into the issue.  Continue reading

Advertisements

Don’t forget this essential finishing touch on your webpage!

Webmastering pop quiz time:

  • Raise your hand if you’ve ever seen the word “favicon”.
  • Keep your hand up if you actually know what it refers to.
  • Now keep your hand up if you already know how to produce one and add it to your own website.

… OK, you awesome folks with your hands still raised can go grab a coffee. The rest of you, read on!

What is a favicon?

Go to your Bookmarks or Favorites menu in your web browser. Right now. (Readers who aren’t well acquainted with bookmarking can probably go grab a coffee too and skip the rest of this post… but let me know and I’ll do a separate post on that, seriously. It is the key to managing your Internet life.)

[sample bookmarks menu]

A snippet from my own bookmarks menu, showing 9 visually distinctive favicons… and the dreaded “blank page” default icon in the highlighted 10th item.

See those little icons next to every item in the menu? Some of them are plain “blank page” document icons, but the majority of them are colorful little images that tell you at a glance exactly what site they’re referencing. This is a favicon, short for “favorites icon” (because it shows up in your Favorites list, get it?). It’s your site’s brand identity boiled down into 16×16 pixels (or 32×32 or more, depending on your operating system). And since it’s the only piece of your visual identity that gets stored along with a user’s bookmark, neglecting to supply one is like leaving your business cards in your other pants.

How do I make one?

There’s a special file type called “.ico” reserved for just such uses as these (also, say, desktop icons for Windows application files). Most browsers will also accept a PNG file as your favicon image, but not all. (For the technical specs, I commend to your attention this excellent 2013 article, “Understanding the Favicon” by Jonathan T. Neal.) So it’s best to use a dedicated .ico file.

Here’s the trick: for some reason, image editors do not include “.ico” in their repertoire of file types. So to convert your desired image (PNG, GIF, JPEG, even BMP) to .ico, you have to use one of the many online file converters. Here are a few:

  • http://realfavicongenerator.net/ – If you want heavy-duty performance, this site will take a 260×260 file and produce a single icon that correctly embeds all the different sizes any modern icon set requires, then check your usage once you’ve installed it.
  • http://favicon-generator.org/ – Quick and dirty for 16×16 pixels.
  • http://tools.dynamicdrive.com/favicon/ – As a happy medium, this one will embed 32×32 and 48×48 versions of your image, as well as 16×16, into a single .ico file.

You can certainly use a solid square image, but if your logo is natively any shape other than square, your favicon will look more slick and professional if you use a transparent background.

Once I have the image, how do I set it as the favicon for my website?

If you have named your file “favicon.ico”, all you really need to do is place it in the root directory of your site. Browsers are hard-wired to look there and do the right thing with it. Presto!

You can also place it in another directory (such as /images) or use a different filename, but then you have to place a little extra code in the headers of your pages. Just add these two lines for your .ico file.

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="/images/favicon.ico" type="image/x-icon">

(Of course, use the actual path to your own image filename, if /images/favicon.ico above isn’t it.)

If you’re using a PNG file, the code is similar, but you also have to change the specified type:

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">
<link rel="icon" href="/images/favicon.png" type="image/png">

Good news for this WordPress.com blog and everyone else’s: you can now set a custom favicon here, too. Go to your blog dashboard (you can type in /wp-admin after your blog’s wordpress.com URL) and click the “Settings > General” tab. On that page, you’ll see a box in the right-hand column for “Blog Picture / Icon”. Upload something here, crop and save, and it will automatically be set as your “blog image” (avatar), which WordPress will also use as your favicon.

Bonus question: How is it pronounced??

Unsurprisingly, opinions do differ. The top contenders seem to be:

  • FAV-ih-kahn (short a, short i)
  • FAVE-ih-kahn (long a, short i)
  • FAVEEYE-kahn (long a, long i)

Whatever your preference, happy fav(e)-ing!

Pro Tip: “Invite Them All” on Facebook

How to Invite All on Facebook | New Code

One of the many little convenience features Facebook has decided you should NOT have is an easy “select all” toggle for adding your friends to an invitation. However, JennyLee has created a little javascript workaround that works right in your browser bar to do exactly what you want: check off all the little boxes of the group of 100 friends you’ve loaded, so you can click “Invite” and boom! your event is underway.

More about ISBNs

After my last post, a friend commented on Facebook to point out, “This doesn’t give you an ISBN, just the ability to print a barcode for any ISBN. You have to pay for prefixes for those things…” Well, yeah, I said. I know that. Therefore it hadn’t even occurred to me that the distinction might bear explaining!

So here’s a little primer on ISBNs.

The ISBN is the identification number which is required for most online sales as well as library systems. It stands for International Standard Book Number. (Note that this means “ISBN number”, which I used to hear all the time from my bookstore colleagues in the early 1990s, ranks up there with “ATM machine” as an instance of RAS syndrome.)

Every distinguishable edition of a book (most often, hardcover and paperback, or 1st edition vs. revised/2nd edition) requires a separate, unique ISBN. Exceptions that can retain the same ISBN include (a) reprinting a book, in the same format as previously, with a new cover but the same interior, or (b) reprinting a book, in the same format as previously, with minor text corrections to individual pages but no substantial revisions or additions.

Now ISBNs, as an international standard, can only be issued by the official ISBN Agency for each country. The authorized U.S. ISBN Agency is a private company called R.R. Bowker, LLC, who also used to publish the multi-volume hardcover catalog of Books In Print, which was completely indispensable back before there was an Amazon.com.

Bowker will issue “a publisher” (whether that’s yourself as a private individual, or a corporate entity) a single ISBN, for a service charge of $125 per book. But for $250, you can apply for a “prefix” and reserve a series block of 10 usable ISBNs. Either way, start with the application link here: http://www.isbn.org/standards/home/isbn/us/application.asp

Why the jump from 1 to 10? Because of the way it’s structured. Modern ISBNs have 13 digits, as follows:

  • 978 = arbitrary 3-digit prefix added in 2007 to convert all formerly 10-digit ISBN strings to 13 digits
  • 0 or 1 = US country code
  • The intervening 8 digits are divided up between the publisher prefix and the title identifier. Large publishers have very short prefixes (3 or even 2 digits), because they could easily have 10,000+ distinct titles/editions in their catalog, so they need to be able to encode 5 figures’ worth of unique digit strings under their prefix. The smallest publishers will have a 7-digit prefix, leaving only 1 digit for their title space: 0 through 9. That’s your block of 10. Single-ISBN reservations simply get issued a string of all 8 digits at once and you’re done—you can’t get another in the same sequence after that.
  • The last digit = a check digit for redundancy. This is like a parity bit in computer programming: it’s calculated based on the preceding 12 (or formerly 9) digits. This is why the ISBN-13 for a given book shows a different check digit from the old ISBN-10.

Bowker will also sell you a bar code for your ISBN, for the modest additional charge of $25 each. You do, in fact, need a bar code to place on the cover—bookstores, online retailers, and libraries all require it. But as I already noted, that’s the part for which there are now free online generators.

Other important cataloging steps have to be addressed separately from ISBN registration if you want to do them:

Further reading for the truly intrigued: Bowker’s ISBN FAQ list.

Oh, and in case you’re wondering: I’m still waiting on the last text corrections from the author before I can send the book project to press, which is why I have time to write all this. :-)

Free Online ISBN Barcode Generator

My dad says I’ve been “pretty quiet lately”, which is perhaps because I’ve been plugging away solidly for the last month trying to get a book project to press. This is a freelance project on which I’ve been working for over two years at this point, but we’ve been in the home stretch since approximately November 2012.

In the home stretch of the project, as all designers know, come all the nitty-gritty details that you’ve pushed off dealing with until “later”. Guess what? It’s later.

So tonight’s task (while I wait for the copyedited index and last few page corrections from the author) is to get the cover files set up. We’re doing a split bind (about 1/3 stamped cloth case with jacket, 2/3 paperback cover), so I have to do them both ways, according to the measurement templates the printers sent me just this morning.

It also means we have two different ISBNs, and guess what else? I need to create bar codes for them. Back in my early publishing days, we didn’t even HAVE barcodes; then we used to order away for them specially. But I figured in this day and age, there was a good likelihood that the Internet could deliver something instantly, and maybe even for free.

Lo and behold, Google found me the answer:
http://bookcovers.creativindie.com/free-online-isbn-barcode-generator/

These fine folks wrote a slick little utility that will generate an EPS file of your ISBN barcode, complete with the price code add-on (if you have one).

I am grateful, so I’m sharing the love. :-) They also do really nice work on the design side.

Let’s just remember to test both barcodes before we commit ink to paper, okay? And I promise I’ll tell more about the book itself when it actually launches.

Linkfest

I’ve been wanting for days and days to write some stuff about what’s happening on my interior landscape, but have been too busy churning out actual work (made some updates to my website, though, alongside working on the big book project). So, in lieu of content, you get some of the interesting things that have come up in the past several weeks.

Design & typography

Beautiful and colorful, both from This Is Colossal:
The Chromatic Typewriter: http://www.thisiscolossal.com/2011/12/the-chromatic-typewriter/?src=footer
A Massive Black Field of Cut Steel Plants Hides a Colorful Secret: http://www.thisiscolossal.com/2012/01/a-massive-field-of-cut-steel-plants-reveals-a-colorful-secret/

The Met has a new section on their (recently overhauled) website called “Connections”, a long series of thematic presentations with voiceovers by various Museum personnel and specialists. It’s really nice.
http://www.metmuseum.org/connections/

Of historical interest: a film about Linotype (click to read about/see the trailer if you don’t know what that is) that premiered in NYC this past weekend:

Linotype: The Film

“How to Build a Newsroom Time Machine”: Typesetting and layout the old-fashioned way, or, what “on the pasteboard” really means:
HOW TO BUILD A NEWSROOM TIME MACHINE

Writing

Gotham Writer’s Workshop offers FREE writing classes! (well, one-hour workshops, but it could be fun):
http://www.writingclasses.com/CommunityEvents/index.php

An old one from Neil Gaiman about how to get published and/or how to get an agent:
http://journal.neilgaiman.com/2005/01/everything-you-wanted-to-know-about.asp

Work

Fascinating:
Scaling back consumption in service of happiness:
http://www.nytimes.com/2010/08/08/business/08consume.html?_r=1&hpw=&pagewanted=all
See also: http://finance.yahoo.com/news/the-case-for-a-21-hour-work-week.html

Useful:

The 100 Best Lifehacks of 2011: The Year in Review

(srsly, read only the ones that you find interesting! Skip the rest!)

Relationships

Unbelievably beautiful:
http://www.huffingtonpost.com/arjuna-ardagh/goddess-worship_b_660896.html

Insightful:

30 Things to Stop Doing to Yourself

Naming Elephants: 10 Ways To Use Radical Honesty to Improve Your Relationship

Not really so insightful, but several people pointed me at it:
http://www.nytimes.com/roomfordebate/2012/01/20/the-gingrich-question-cheating-vs-open-marriage/

Mmm!

Scotch tastings in NYC:
http://nycwhisky.com/events-old

Star Wars

I forget who pointed me at this, but I am totally loving it (and I’m on about page 52 of 600+ and counting — they just got up to Episode IV last month).
Darths & Droids is an “RPG screencap comic” that re-envisions Star Wars: Episode I (The Saga Begins) as a roleplaying campaign. Apparently inspired by DM of the Rings, but funnier in terms of making sense of the weaknesses of the source material.
http://www.darthsanddroids.net/episodes/0001.html

This reminds me that I also wanted to post this link when it first came to my attention several months ago:
Secret History of Star Wars: A Tribute to Marcia Lucas
http://secrethistoryofstarwars.com/marcialucas.html

Jewish

Jewish Sacred Theatre – Its Components and Its Means:
http://www.jewish-theatre.com/visitor/article_display.aspx?articleID=525

A handy nuts-and-bolts link on kashering your kitchen:
http://njop.org/resources/kosher/how-to-keep-kosher/