---
title: "Use custom Google Font in your form - Convert Forms"
description: "While Convert Forms offers a plethora of widely used Google Fonts to choose from and use as your main form font, you may still want to use a specific"
url: "https://www.tassos.gr/docs/convert-forms/functionality/custom-google-font"
date: "2026-11-09T17:34:55+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/docs) / [ Convert Forms ](https://www.tassos.gr/docs/convert-forms) / [ How-to ](https://www.tassos.gr/docs/convert-forms/functionality)

#  Use custom Google Font in your form

While Convert Forms offers a plethora of widely used Google Fonts to choose from and use as your main form font, you may still want to use a specific font from Google Fonts that we don't yet support. In this guide, I'll show you how to use any Google Font and load it on your Convert Forms form.

## [Step 1: Pick your font on Google Font](#step-1-pick-your-font-on-google-font)

Head over to [Google Fonts](https://fonts.google.com/) and search for the font you want to use. For this example, we'll use the font [Outfit](https://fonts.google.com/specimen/Outfit).

Once you've selected the Google Font, click on the "Get Font" button on the top right of the page.

[![custom google font 1](https://www.tassos.gr/images/2025/10/custom-google-font-1.png)](https://www.tassos.gr/images/2025/10/custom-google-font-1.png)

Next, click on the "Get embed code" button.

[![custom google font 2](https://www.tassos.gr/images/2025/10/custom-google-font-2.png)](https://www.tassos.gr/images/2025/10/custom-google-font-2.png)

Select the Font URL from the "Embed code in the <head> of your html" area, as seen below.

[![custom google font 3](https://www.tassos.gr/images/2025/10/custom-google-font-3.png)](https://www.tassos.gr/images/2025/10/custom-google-font-3.png)

## [Step 2: Load the font into Convert Forms](#step-2-load-the-font-into-convert-forms)

Next step is to edit your form and go to Behavior > PHP Scripts > Form Prepare so we can load the font and be able to use it in the form.

Add the PHP snippet:

 ```
$doc->addStylesheet('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
```

Replace the Google Font URL with the URL you copied from the previous step.

[![custom google font 4](https://www.tassos.gr/images/2025/10/custom-google-font-4.png)](https://www.tassos.gr/images/2025/10/custom-google-font-4.png)

## [Step 3: Apply the font in your form](#step-3-apply-the-font-in-your-form)

Finally, we need to apply the font in the form. To do so, navigate to Design > Advanced > Custom CSS area and add:

 ```
#cf_123 {

  --font: "Outfit", sans-serif;
}
```

- Replace 123 with your Form ID.
- Replace "Outfit" with your Google Font name.

[![custom google font 5](https://www.tassos.gr/images/2025/10/custom-google-font-5.png)](https://www.tassos.gr/images/2025/10/custom-google-font-5.png)

 Last updated on Nov 9th 2026 14:11