Guide to defining font style in vanilla-extract/CSS

Question

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows:

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

const myFont = fontFace({
  src: 'local("Comic Sans MS")'
});

export const text = style({
  fontFamily: myFont
});

However, I want to use a different font called Jungle Fever Nf. How can I import this font by changing the source to

src:'local("Jungle Fever Nf")

? I have tried installing the font on my local machine, but it's not working. Maybe pointing the src to the downloaded font file or importing it in the CSS will solve the issue. I just don't know how to do this with vanilla-extract/css.

css typescript

Answer 1

Answer №1

To implement custom fonts, you can utilize the globalFontFace function:

The font styles can be found in the file @/styles/fonts.css.ts

const contentFont = "Outfit";

globalFontFace(contentFont, {
    src: "url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2')",
    fontWeight: 100,
    fontStyle: 'normal',
    fontDisplay: 'swap'
});

export const fontText = style({
    fontFamily: contentFont,
});

In your component, include the following code:

import * as fontCss from "@/styles/fonts.css";

const MainTitle = () => {
    return <>
        <h1 className={fontCss.fontTitle}>Le Jo'</h1>
    </>
}

export default MainTitle;

Answer 2

To implement custom fonts, you can utilize the globalFontFace function:

The font styles can be found in the file @/styles/fonts.css.ts

const contentFont = "Outfit";

globalFontFace(contentFont, {
    src: "url(https://fonts.gstatic.com/s/outfit/v6/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2')",
    fontWeight: 100,
    fontStyle: 'normal',
    fontDisplay: 'swap'
});

export const fontText = style({
    fontFamily: contentFont,
});

In your component, include the following code:

import * as fontCss from "@/styles/fonts.css";

const MainTitle = () => {
    return <>
        <h1 className={fontCss.fontTitle}>Le Jo'</h1>
    </>
}

export default MainTitle;

Guide to defining font style in vanilla-extract/CSS

Answer №1

Similar questions

Deactivate user session in LoopBack 4 API

Adjust for the region shifted using transform: translate

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

Angular removing every query string parameters

Issue with CSS3 animations

Using jQuery to change the `class` of the parent `div` based on the length of a `p`

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Error encountered during the deployment of Ionic 3 with TypeScript

Experiencing unexpected behavior with Next.JS getStaticProps functionality

Is there a way to showcase several items simultaneously on a bootstrap 5 carousel slide?

Aligning text at the center of the page, stacked on top of each other

Expanding the full width of the bootstrap navbar

Aligning images and input fields vertically with relative measurements

Is there a way to create automatic line breaks in this text?

Headers with a 3 pixel stroke applied

What key element is not included in this code?

The rounded corners feature of PIE.htc does not seem to be functioning properly on Internet Explorer

Leveraging Leaflet or any JavaScript library alongside Typescript and webpack for enhanced functionality

When a button is undersized, the click event may not register

Applying a transparent layer to all slider images, with the exception of the one that is