While working on a new side project, I decided to try a quirkier font. Specifically, Fraunces available on Google Fonts.
When I went to try out the font locally using the Google Fonts embed code, I was surprised and confused by my options. In all of my years as a web developer, I’ve never set a "WONK" value in CSS.
I decided to use the font by self-hosting it, and was even more confused. There were a ton of files in my download, and I didn’t understand what needed to be loaded with the @font-face rule or how to write the rule.
My unzipped download from Google Fonts looked something like this:
Fraunces
| OFL.txt
| README.txt
| Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf
| Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf
|
|--static
| | Fraunces_9pt_Soft-Black.ttf
| | Fraunces_9pt_Soft-BlackItalic.ttf
| | Fraunces_9pt_Soft-Bold.ttf
| | Fraunces_9pt_Soft-BoldItalic.ttf
| | Fraunces_9pt_Soft-Italic.ttf
| | Fraunces_9pt_Soft-Light.ttf
| | Fraunces_9pt_Soft-LightItalic.ttf
| | Fraunces_9pt_Soft-Regular.ttf
| | Fraunces_9pt_Soft-SemiBold.ttf
| | Fraunces_9pt_Soft-SemiBoldItalic.ttf
| | Fraunces_9pt_Soft-Thin.ttf
| | Fraunces_9pt_Soft-ThinItalic.ttf
| | Fraunces_9pt_SuperSoft-Black.ttf
| | Fraunces_9pt_SuperSoft-BlackItalic.ttf
| | Fraunces_9pt_SuperSoft-Bold.ttf
| | Fraunces_9pt_SuperSoft-BoldItalic.ttf
| | Fraunces_9pt_SuperSoft-Italic.ttf
| | Fraunces_9pt_SuperSoft-Light.ttf
| | Fraunces_9pt_SuperSoft-LightItalic.ttf
| | Fraunces_9pt_SuperSoft-Regular.ttf
| | Fraunces_9pt_SuperSoft-SemiBold.ttf
| | Fraunces_9pt_SuperSoft-SemiBoldItalic.ttf
| | Fraunces_9pt_SuperSoft-Thin.ttf
| | Fraunces_9pt_SuperSoft-ThinItalic.ttf
| | Fraunces_9pt-Black.ttf
| | Fraunces_9pt-BlackItalic.ttf
| | Fraunces_9pt-Bold.ttf
| | Fraunces_9pt-BoldItalic.ttf
| | Fraunces_9pt-Italic.ttf
| | Fraunces_9pt-Light.ttf
| | Fraunces_9pt-LightItalic.ttf
| | Fraunces_9pt-Regular.ttf
| | Fraunces_9pt-SemiBold.ttf
| | Fraunces_9pt-SemiBoldItalic.ttf
| | Fraunces_9pt-Thin.ttf
| | Fraunces_9pt-ThinItalic.ttf
| | Fraunces_72pt_Soft-Black.ttf
| | Fraunces_72pt_Soft-BlackItalic.ttf
| | Fraunces_72pt_Soft-Bold.ttf
| | Fraunces_72pt_Soft-BoldItalic.ttf
| | Fraunces_72pt_Soft-Italic.ttf
| | Fraunces_72pt_Soft-Light.ttf
| | Fraunces_72pt_Soft-LightItalic.ttf
| | Fraunces_72pt_Soft-Regular.ttf
| | Fraunces_72pt_Soft-SemiBold.ttf
| | Fraunces_72pt_Soft-SemiBoldItalic.ttf
| | Fraunces_72pt_Soft-Thin.ttf
| | Fraunces_72pt_Soft-ThinItalic.ttf
| | Fraunces_72pt_SuperSoft-Black.ttf
| | Fraunces_72pt_SuperSoft-BlackItalic.ttf
| | Fraunces_72pt_SuperSoft-Bold.ttf
| | Fraunces_72pt_SuperSoft-BoldItalic.ttf
| | Fraunces_72pt_SuperSoft-Italic.ttf
| | Fraunces_72pt_SuperSoft-Light.ttf
| | Fraunces_72pt_SuperSoft-LightItalic.ttf
| | Fraunces_72pt_SuperSoft-Regular.ttf
| | Fraunces_72pt_SuperSoft-SemiBold.ttf
| | Fraunces_72pt_SuperSoft-SemiBoldItalic.ttf
| | Fraunces_72pt_SuperSoft-Thin.ttf
| | Fraunces_72pt_SuperSoft-ThinItalic.ttf
| | Fraunces_72pt-Black.ttf
| | Fraunces_72pt-BlackItalic.ttf
| | Fraunces_72pt-Bold.ttf
| | Fraunces_72pt-BoldItalic.ttf
| | Fraunces_72pt-Italic.ttf
| | Fraunces_72pt-Light.ttf
| | Fraunces_72pt-LightItalic.ttf
| | Fraunces_72pt-Regular.ttf
| | Fraunces_72pt-SemiBold.ttf
| | Fraunces_72pt-SemiBoldItalic.ttf
| | Fraunces_72pt-Thin.ttf
| | Fraunces_72pt-ThinItalic.ttf
| | Fraunces_144pt_Soft-Black.ttf
| | Fraunces_144pt_Soft-BlackItalic.ttf
| | Fraunces_144pt_Soft-Bold.ttf
| | Fraunces_144pt_Soft-BoldItalic.ttf
| | Fraunces_144pt_Soft-Italic.ttf
| | Fraunces_144pt_Soft-Light.ttf
| | Fraunces_144pt_Soft-LightItalic.ttf
| | Fraunces_144pt_Soft-Regular.ttf
| | Fraunces_144pt_Soft-SemiBold.ttf
| | Fraunces_144pt_Soft-SemiBoldItalic.ttf
| | Fraunces_144pt_Soft-Thin.ttf
| | Fraunces_144pt_Soft-ThinItalic.ttf
| | Fraunces_144pt_SuperSoft-Black.ttf
| | Fraunces_144pt_SuperSoft-BlackItalic.ttf
| | Fraunces_144pt_SuperSoft-Bold.ttf
| | Fraunces_144pt_SuperSoft-BoldItalic.ttf
| | Fraunces_144pt_SuperSoft-Italic.ttf
| | Fraunces_144pt_SuperSoft-Light.ttf
| | Fraunces_144pt_SuperSoft-LightItalic.ttf
| | Fraunces_144pt_SuperSoft-Regular.ttf
| | Fraunces_144pt_SuperSoft-SemiBold.ttf
| | Fraunces_144pt_SuperSoft-SemiBoldItalic.ttf
| | Fraunces_144pt_SuperSoft-Thin.ttf
| | Fraunces_144pt_SuperSoft-ThinItalic.ttf
| | Fraunces_144pt-Black.ttf
| | Fraunces_144pt-BlackItalic.ttf
| | Fraunces_144pt-Bold.ttf
| | Fraunces_144pt-BoldItalic.ttf
| | Fraunces_144pt-Italic.ttf
| | Fraunces_144pt-Light.ttf
| | Fraunces_144pt-LightItalic.ttf
| | Fraunces_144pt-Regular.ttf
| | Fraunces_144pt-SemiBold.ttf
| | Fraunces_144pt-SemiBoldItalic.ttf
| | Fraunces_144pt-Thin.ttf
| | Fraunces_144pt-ThinItalic.ttf
To use Fraunces as a variable font, of all these files, all I needed were Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf and Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf. The files in static are provided if you want to load and use Fraunces as a “traditional” font. An obvious advantage to doing so would be that if you were only interested in one specific version, the file size would be much smaller.
To use these with Astro, you can put them anywhere in your public directory. I put them in /public/fonts/.
To load and use them, I created one @font-face rule for the italic file and one for the normal file. I then created CSS classes to apply the font with the desired attributes. In my Astro project, I had one layout file with the is:global attribute on a <style> tag. The CSS looked something like:
<style is:global>
@font-face {
font-family: 'Fraunces';
src: url('/fonts/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf')
format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Fraunces';
src: url('/fonts/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf')
format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
.fraunces-i {
font-family: 'Fraunces', system-ui;
font-optical-sizing: auto;
font-weight: 200;
font-style: italic;
font-variation-settings:
'SOFT' 50,
'WONK' 0;
}
.fraunces-section-header {
font-family: 'Fraunces', system-ui;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
font-variation-settings:
'SOFT' 0,
'WONK' 1;
font-size: 3rem;
}
...
</style>