Table of contents
No headings in the article.
Edit 24-May-2022: I've updated this post and it can be found at jeffpohlmeyer.com/self-hosting-a-font-with-..
In the vein of learning in public, I want to write a little blurb about this.
A project I'm working on for a client required the use of a font called Univers Black. Since I was showing it to him using a combination Poppins and Nunito, my kneejerk reaction was to check fonts.google.com to see if I could get the quick @import
statement, only to find that it's not actually available on Google fonts. So after a quick search I was directed to fontsplace.com/univers-black-free-font-down.. where it provided me a univers-black.tff file.
I did some searching online and found resources itnext.io/create-unique-websites-with-custo.. and stackoverflow.com/questions/60854215/tailwi.., but neither of them worked for me. So it was on to the next: YouTube. A quick search took me to youtube.com/watch?v=sOnBG2wUm1s (after watching the video I immediately subscribed to the channel because the video is just so well explained I know there's bound to be a lot of good content there).
Long story short, you want to do two things:
- Update your main
*.css
file (where you have the big 3 Tailwind directives) to add this custom font family to the base layer
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- Update the
tailwind.config.js
file to assign this font to a class The fairly straightforward way to update the*.css
file is as follows
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Univers';
src: local('Univers'),
url('/static/fonts/univers-black.ttf') format('ttf');
}
}
As a note, I have all of the images I'm hosting in the static
directory instead of the public
directory.
Then I just need to update the config file:
// tailwind.config.js
const config = {
mode: 'jit',
purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.svelte'],
theme: {
extend: {
fontFamily: {
univers: ['Univers'],
},
}
}
}
Then anywhere I want to apply it I simply apply the font-univers
class. Should be great, right? Well, to test this I created a simple Svelte component
<div class="h-screen grid place-items-center">
<h1 class="font-univers text-7xl">Testing Univers Font</h1>
</div>
and the resulting image is what I saw
Frustrating to say the least. After a half hour of pulling my hair out, moving the files to a newly created
public
folder, using an @import
with a local url path, and any number of other things, I tried on other option. I went to cloudconvert.com/ttf-to-woff and converted the .ttf file to .woff and .woff2 files. Upon doing this, I updated the app.css
file to look like
/* app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
@font-face {
font-family: 'Univers';
src: local('Univers'), url('/static/fonts/Univers-Black.woff') format('woff'),
url('/static/fonts/Univers-Black.woff2') format('woff');
}
}
and almost like magic this is what I saw
So, it seems that, when using Tailwind with the JIT compiler in a SvelteKit app, that it just doesn't like .tff
files and you're better off using .woff
and .woff2
files for self-hosted fonts.