How are custom fonts implemented?

[sledgehammer999]

I am reading the docs about custom fonts and at one point it says that in my app.css file I need to put something like

import "@fontsource/open-sans";

I am curious, how does this import work? AFAIK this isn't valid css. Is this handled by a plugin? If so, which?
EDIT: Does this import mean that it uses a local font file that is then bundled with the app? Or does it become a remote URL?

Secondly, once I am done configuring my font, how can I use it in regular html elements or custom components? Just use the font-family tailwind class and it will use my font by default?

[endigo9740]

I am curious, how does this import work? AFAIK this isn't valid css. Is this handled by a plugin? If so, which?
EDIT: Does this import mean that it uses a local font file that is then bundled with the app? Or does it become a remote URL?

In short, the source of the font is an NPM package. You'll note the step listed installs your font of choice. In this example open-sans:

npm install @fontsource/open-sans

Which should live in something like ./node_module/@font-source/open-sans. Then the CSS file will resolve to this.

These directions come directly from Fontsource, which you can see written here:

• https://fontsource.org/docs/getting-started/install

If you're curious to hear more about their implementation, I might recommend reaching out to their support communities on GitHub/Discord.

Secondly, once I am done configuring my font, how can I use it in regular html elements or custom components? Just use the font-family tailwind class and it will use my font by default?

We recommend you assign the font family values to your theme properties like so. Substitute cerberus for your theme name, then replace 'Open Sans', sans-serif; with the font family implementation per font. This will ensure many of Skeleton's built in typography and features utilize the correct font. Such as h1, h2, h3... is setup to use --heading-font-familly automatically.

[data-theme='cerberus'] {
  --heading-font-family: 'Open Sans', sans-serif;
  --base-font-family: 'Open Sans', sans-serif;
  --anchor-font-family: 'inherit';
}

If you need to reference the theme-specified version of this font family list, you would use your API methods listed here:

https://www.skeleton.dev/docs/get-started/core-api#typography

For example if you set --heading-font-family you would then use that as you please with the .heading-font-family class.

[Sarenor]

Yep.

[endigo9740]

@sledgehammer999 the @ in NPM packages refers to an NPM organization. That's the same reason our packages use these as well:

@skeletonlabs/skeleton

• Skeleton Labs -> the organization
• Skeleton - the specific package within that org

It helps essentially namespace things, so we an use generic package names likeskeleton

It's an NPM convention, nothing specific to us or Fontsource.

[sledgehammer999]

the @ in NPM packages refers to an NPM organization

I am refering to @ as seemingly missing before the import statement. Aka @import, an at-rule.

[endigo9740]

Ok I see what they're doing here:

On FontSource they're expecting the import to occur in a JS/TS file, which Vite supports.

// +layout.svelte
import "@fontsource/open-sans";
import "./app.css";

In our docs we're recommending folks import this in their CSS stylesheet. Which should be @import.

// app.css
@import "@fontsource/open-sans";

I'd welcome a ticket or PR to help correct this.

[sledgehammer999]

Nice. I thought I was mad when I read the various docs and your replies. "What am I missing?" was my thought.

[endigo9740]

Too many @ signs :D For context in Skeleton we're supporting multiple frameworks, so we can't assume everyone is using Vite. The "universal" solution is to import in the stylesheet, but does require the minor @import change.

[endigo9740]

@sledgehammer999 @Sarenor just FYI I've been working on a big docs update, so I've included the @import fix for this:

• Flush out Docs and Examples #3461

No need to file a new ticket or submit a separate PR.