#loading and using local font

7 messages · Page 1 of 1 (latest)

lethal elm
#

The following code snippet is located in global.css which is loaded on every page. I have two fonts located in /public/fonts/, GeisVF.woff2 and GeistMonoVF.woff2.

@font-face {
  font-family: "GeistVF";
  src: url("/fonts/GeistVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMonoVF";
  src: url("/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Geist";
}

footer {
  font-family: "GeistMono";
}

Do you expect this to apply, yes or no?

strong pendantBOT
#

Hi @lethal elm. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, the CSS code you provided should apply the custom fonts to your Astro project. However, there seems to be a mismatch between the font-family names declared in the @font-face rules and the ones used in the body and footer selectors.

In your @font-face rules, you've declared the font-family names as "GeistVF" and "GeistMonoVF", but in your body and footer selectors, you're using "Geist" and "GeistMono" respectively.

To apply the custom fonts correctly, you should use the exact same font-family names. Here's the corrected CSS:

@font-face {
  font-family: "GeistVF";
  src: url("/fonts/GeistVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMonoVF";
  src: url("/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "GeistVF";
}

footer {
  font-family: "GeistMonoVF";
}

This way, the "GeistVF" font will be applied to the body and the "GeistMonoVF" font will be applied to the footer.

For more information on using custom fonts in Astro, you can refer to the Astro documentation (https://docs.astro.build/en/guides/fonts/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@lethal elm kapa.ai is still learning and improving, please let us know how it did by reacting below

lethal elm
#

@strong pendant Same question, but different CSS this time:

@font-face {
  font-family: "GeistVF";
  src: url("/fonts/GeistVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMonoVF";
  src: url("/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Geist";
}

footer {
  font-family: "GeistMono";
}
strong pendantBOT
#

Let me check the knowledge base for you. One moment! :books:

#

No, the CSS code you provided will not apply the custom fonts as expected. The issue lies in the mismatch between the font-family names declared in the @font-face rules and the ones used in the body and footer selectors.

In your @font-face rules, you've declared the font-family names as "GeistVF" and "GeistMonoVF", but in your body and footer selectors, you're using "Geist" and "GeistMono" respectively.

To apply the custom fonts correctly, you should use the exact same font-family names. Here's the corrected CSS:

@font-face {
  font-family: "GeistVF";
  src: url("/fonts/GeistVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GeistMonoVF";
  src: url("/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "GeistVF";
}

footer {
  font-family: "GeistMonoVF";
}

This way, the "GeistVF" font will be applied to the body and the "GeistMonoVF" font will be applied to the footer.

For more information on using custom fonts in Astro, you can refer to the Astro documentation (https://docs.astro.build/en/guides/fonts/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: