I can't use Local Fonts with Gatsby & Vanilla Extract

[tombrereton]

Hi!

I'm trying to use a local font in my fonts folder but I can't seem to get it working no matter what I try.

I looked on the docs here and tried both option 1 and 2 below and neither seem to work.

Would anyone be kind enough to point me in the right direction? Should I be using local() or url() to load the font file?

Thanks

---

Option 1 : layout.css.ts file

import { fontFace, globalFontFace } from '@vanilla-extract/css'

globalFontFace('EverettRegularTest', {
	src: 'local("../../fonts/TWKEverett-Regular-web.woff2")'
});

export const layout = style({
	backgroundColor: "orange",
	border: "2px solid black",
	fontFamily: "EverettRegularTest"
})

Option 2

import { fontFace, globalFontFace } from '@vanilla-extract/css'


export const EverettRegular = fontFace({
	src: 'local("../../fonts/TWKEverett-Regular-web.woff2")'
})

export const layout = style({
	backgroundColor: "orange",
	border: "2px solid black",
	fontFamily: EverettRegular
})

[Dremora]

I've faced the same problem with create-react-app. What helped me was to use an absolute path to the asset (from the project root) in url(): e.g. backgroundImage: 'url(src/path/to/component/folder/image.jpg)'. You might need to have "baseUrl": ".", in your tsconfig.json for this work.
I do think it's a bug that relative URLs don't work, but hope this workaround also applies to Gatsby.

[tombrereton]

Hi Remora,

Thanks for a the quick reply.

I tried your solution but unfortunately it didn't work for me.

In the end I created a Storage Account in Azure, create a Blob Container, and uploaded all my fonts to there.
You can then find a url to the font in the file "properties".

This means I can import my fonts like so:

import { fontFace } from '@vanilla-extract/css'

export const EverettRegular = fontFace({
  src: 'url(https://exampleaccountstorage.blob.core.windows.net/fonts/TWKEverett-Regular-web.woff2)',
})

[tombrereton]

Solution:

In the end I created a Storage Account in Azure, create a Blob Container, and uploaded all my fonts to there.
You can then find a url to the font in the file "properties".

This means I can import my fonts like so:

import { fontFace } from '@vanilla-extract/css'

export const EverettRegular = fontFace({
  src: 'url(https://exampleaccountstorage.blob.core.windows.net/fonts/TWKEverett-Regular-web.woff2)',
})

[danielschmid]

I have the same problem and your solution works also for me. Have you found the problem regarding your initial approach ?

[tombrereton]

Hi danielschmid,

I ran into other issues with vanilla-extract so I dropped it from my project and used scss instead. This meant I could keep the fonts in a local folder and load them in via regular font faces.

For example:

// typography.scss
@font-face {
	font-family: "EverettRegular";
	src: url("../fonts/TWKEverett-Regular-web.woff2");
	font-display: swap;
}

@mixin font-body {
	font-family: "EverettRegular";
	font-size: 14px;
	line-height: 18px;
}

// component.scss
@import "../../css/typography.scss";

.component {
	@include font-body;
}

[danielschmid]

Hi @tombrereton

Thanks for your reply. I’ll see if there is a solution to the problem, but otherwise i'll use the regular approach with a standard css file.

Kind regards,