Adding Custom Fonts

Introduction

Formcrafts allows you to personalize your forms with custom fonts. You can even apply different custom fonts to various elements of your form, creating a unique and cohesive design.

Using custom fonts

To begin, you need a public link to a hosted font file. We recommend using the WOFF format for compatibility and performance. Once you’ve obtained the link to your desired font file, you’re ready to move on to the next step.

Custom fonts are applied using the @font-face property, via Custom CSS. Custom CSS can be accessed on the form edit page via Styling → Other → Custom CSS

Practical example

Below is an example of how to implement a custom font using CSS. In this case, we're using the Inter font family. The CSS code is structured to define the font properties and apply it globally to all elements in the form.

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuI6fAZ9hjp-Ek-_EeA.woff) format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* {
  font-family: 'Inter', sans-serif;
}

This CSS snippet demonstrates the use of the @font-face rule to define the custom font and its properties, followed by a universal selector (*) to apply the 'Inter' font across all elements of the form.