![60s fonts on typekit 60s fonts on typekit](https://www.typewolf.com/assets/img/fonts/ibm-plex-sans-font-sample.png)
This is a known bug in Safari with variable fonts. My question was almost immediately answered by the creator of Inter, Rasmus Andersson: Any ideas why? (2/2)- Matthew Ström March 3, 2019 I reached out for help:įor some strange reason, Inter shows up in italic on Safari, despite specifying `font-style: normal` in the font-face declaration. No matter what I did, I couldn’t force Safari to use the normal (upright) version of Inter. When I originall published this post, I was experiencing a weird bug: in Safari, all instances of Inter were rendering in italic. I am confident that it’ll look good in whatever fonts match my detailed system font stacks. Second, I don’t care if my site doesn’t look identical in all browsers ever.
#60s fonts on typekit update#
I wanted to ship this update without getting in the weeds. The reason for this is twofold: first, I’m lazy. A note on fallback fontsĪstute readers will note that I chose not to implement fallback fonts for older browsers. Next time you’re booting up a project, give variable fonts a try. Variable fonts can improve performance if you subset carefully - While it’s not 100% out-of-the-box, there ar easy-to-use subsetting tools like glyphanger and fonttools that can help you over the finish line.
#60s fonts on typekit download#
#60s fonts on typekit full#
Access to the full spectrum of font weights (previously I only had regular and bold).1 new font, Inter (previously I was relying on system fonts for sans serif).With the new subset fonts, my numbers were looking much better: In the case of Inter, this resulted in a 300kb reduction - that’s a 78% reduction. So I used a tool called glyphhanger to subset my fonts to just latin characters, removing most of the characters I wouldn’t need. I didn’t need most of those I write in english, and system fonts can support automatic translations. It turns out that the variable font files I was using include a massive amount of characters: Diacritics for many languages, Cyrillic characters, Greek characters, and so on. What happened? I thought variable fonts were supposed to be small?
![60s fonts on typekit 60s fonts on typekit](http://www.fontscape.com/pictures/leslie-cabarga/LoveOpen.gif)
Looking into this, I realized that the variable font files were huge: Inter weighs in at 387kb, making up most of the difference. My initial attempt at including a variable version of Source Serif, along with introducing Inter, resulted in a surprisingly substantial increase in most metrics. To get those two fonts from Typekit’s server took 4 requests, bringing the page to a total of 8 requests 2. I used typekit’s CSS-only loader, as it was super-speedy compared to the javascript equivalent. The instructions they provide are incredibly detailed and useful, so I won’t try to re-create them here.īefore I switched to variable fonts, I was loading Source Serif in Roman and Italic at a two different weights. I started with Clearleft’s case study of implementing variable fonts. Faster load times mean a better internet. Why use variable fonts? In addition to technical simplicity (1 font file instead of multiple), variable fonts tend to come in smaller files than their more traditional cousins. A responsive lettering example, courtesy of Erik van Blokland. Instead of requiring individual files for bold and light weights, or regular or italic variations, you only need a single variable file. Variable fonts are a new 1 type of font file. Here’s how I implemented the change, and what I learned along the way. After learning that Source Serif and Inter both had variable versions, I started switching this site over to use them. Ever since I first learned about variable fonts, I’ve wanted to use them in my own work.