These are the WOFF files we want to use on the website.
The files we want are the WOFF files, there are five of these for Equity this is because I uploaded five fonts and each font gets its own WOFF file. If you open any of the HTML files, you will get an example web page showing the font in question.
ONLINE FONT CONVERTER FOR WEB GENERATOR
Ok, open the font squirrel generator page, it looks like Figure 9.1. Usually, those are the ones that you have bought for the purpose or those that are freely available for use, like open source fonts.
ONLINE FONT CONVERTER FOR WEB PC
font squirrel seems to be well respected (Mr Butterick recommends it too), it has more conversion options than other sites and it also has a policy of not converting fonts that the designers have requested not be converted.įor example if I were to try and convert the Calisto MT font from my PC (by uploading its. So we’ve got the font files, how do we convert them? Well we use an online font converter there are lots of these, but the one I’m recommending is font squirrel.
Mr Butterick was kind enough to let me have a copy when I enquired about them - I like them and I’m very grateful to Mr Butterick for allowing me to use them. Of the rest, I’m only using a subset on the website I’ve shown the ones I’m using in blue in Table 9.1. ttf files only, this brings the total number of files down to 126. ttf extension), this is because Mr Butterick optimised these fonts for web use when he created them and recommends that these be converted to WOFF files (this is peculiar to the Equity fonts). Now (despite what I said in § 9.1.1 - I said always use OpenType CFF files) I’m going to use the OpenType TT files (with the. Tabular figures use non-proportional spacing for numbers (the numbers all have a fixed width) and this makes them stack better when used in a table of numbers. Triplicate has variants for standard text, code, short form characters and proportional spacing (so that would be a proportional, non-proportional font - go figure).
Table 9.1 lists the main font files that came with the Equity font set (there are a lot more than these), Equity and Concourse have similar sets but with tabular figures †1. So how do we get our WOFF file? - Well we start with a basic OpenType font file - this is how I converted the Equity fonts and this explanation basically follows the instructions I received when I bought the fonts - but the principal is the same for any font. WOFF files are basically standard OpenType font files that have undergone a compression process to make them smaller.
WOFF - web open font format files are how we get a font onto a website - it is this file that the browser renders as a font. If you already have the WOFF files for the font then you can skip this part. Whilst I’m using the Equity fonts, the process I describe here works for any font. I’m going to demonstrate this with the Equity fonts - you may not want to use these on your site, and that’s fine - if you’re using open source fonts I cover this in § 9.4.