✍️Using custom fonts

Last updated: 2.0.0 (16/01/2024)

You may pretty quickly bump up against the fact that Valence will default to using your system's fonts.

This guide assumes you have followed your chosen Discipline library's Getting Started guide.

1. To start, download and save whichever font/s you want to use in your project. In this example we're going to use Plus Jakarta Sans, which is available for free on Google Fonts. Relevant files from this font have been saved to the src/assets/fonts/ folder in our project directory.

2. Then, we're going to define and import the fonts into a global.css file, which we will then import. We're going to create the file in src/assets/css/, then paste the standard CSS font imports like so:

@font-face {
  font-family: "PlusJakartaSans";
  src: local("PlusJakartaSans-Regular"), 
       url("../fonts/PlusJakartaSans-Regular.ttf") 
       format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "PlusJakartaSans";
  src: local("PlusJakartaSans-Italic"), 
       url("../fonts/PlusJakartaSans-Italic.ttf") 
       format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "PlusJakartaSans";
  src: local("PlusJakartaSans-Bold"),
       url("../fonts/PlusJakartaSans-Bold.ttf") 
       format("truetype");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "PlusJakartaSans";
  src: local("PlusJakartaSans-BoldItalic"), 
       url("../fonts/PlusJakartaSans-BoldItalic.ttf") 
       format("truetype");
  font-weight: 800;
  font-style: italic;
}


/* The rest of our css from before */

1. Then, head back into the root app file (usually App.tsx or App.jsx) and import the global.css file:

import "./assets/css/global.css"

// The rest of your code...

1. Finally, we can update the ValenceProvider to use our new font/s:

// Some codefunction App() {
  // Hooks, etc.

  return (
    <>
      <ValenceProvider
        fontFamily={{
          default: "PlusJakartaSans"
        }}
      >
        {/* Your app's contents */}
     </ValenceProvider>
    <>
  )
}

That's all there is to it! Valence will default to using this font when it needs a monospace or heading font, however you can supply different fonts to them by updating the fontFamily prop of the ValenceProvider with references to those fonts.