---
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/customize/custom-google-font"
date: "2026-04-28T17:48:45+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Styling and Customization ](https://www.tassos.gr/index.php?option=com_content&view=category&id=71)

#  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 &lt;head&gt; 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 &gt; PHP Scripts &gt; 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 &gt; Advanced &gt; 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 Oct 28th 2025 09:10

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Styling and Customization",
            "item": "https://www.tassos.gr/docs/convert-forms/customize"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Use custom Google Font in your form",
            "item": "https://www.tassos.gr/docs/convert-forms/customize/custom-google-font"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/customize/custom-google-font"
    },
    "headline": "Use custom Google Font in your form",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/convert-forms/customize/custom-google-font"
    },
    "datePublished": "2025-10-28T09:27:34+02:00",
    "dateCreated": "2025-10-28T09:27:34+02:00",
    "dateModified": "2025-10-28T09:28:40+02:00"
}
```