---
title: "Adding a Custom Font to a Module"
slug: "adding-a-custom-font-to-a-module"
updated: 2024-04-02T10:46:44Z
published: 2024-04-02T10:46:44Z
canonical: "support.yotpo.com/adding-a-custom-font-to-a-module"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding a Custom Font to a Module

Products

			
				
					
						  

					
					Loyalty & Referrals
		
			

				

###### Supported plans

				

Free, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

N/A

			

The Yotpo Loyalty & Referrals [on-site modules](/v1/docs/display-on-site) allow you to customize the fonts of the textual elements displayed in them. You can either use a predefined font or a custom-uploaded font.

## Adding a custom font

If you want to use a custom font in a certain text element of a module, click on the existing font name.![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/a2ccd625-d304-4393-8e1e-6b0eb13f42f6.gif?sv=2026-02-06&spr=https&st=2026-10-31T10%3A08%3A07Z&se=2026-10-31T11%3A08%3A07Z&sr=c&sp=r&sig=tO6x%2BtAhlIqnEIl5Ima01soDEvHXGI3FWMkTnYfSYIM%3D) You will then see the following fields:

- **Font-family name -** This is the only item you need to have your font appear **onsite**. Enter the font-family name that you wish to use on this module.

	
	Tip!
	

		

You can use Google fonts to browse fonts and locate the font-family name.

	

- **Font URL -** Add a font URL if you want your font to load in the module **preview display**.

	
	**Please note:**Without a font URL, your font will display on your website, however, it will not be reflected in the module editor preview.

- **Font weight (optional) -** The *font-weight* CSS property sets the weight, or boldness, of the font. The weights available depend on the *font-family* you chose. Enter an integer between **100** and **900** to choose a weight.

	The default weight is set to 400 and will apply if you leave the field blank.

### Using a Google font

In order to use a Google font:

1. Go to [https://fonts.google.com/](https://fonts.google.com/) and locate the desired font. In this example, the font name is ***Lobster***
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/2d855448-686d-4d61-aa47-0621235dbbb8.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A08%3A07Z&se=2026-10-31T11%3A08%3A07Z&sr=c&sp=r&sig=tO6x%2BtAhlIqnEIl5Ima01soDEvHXGI3FWMkTnYfSYIM%3D)

1. Click **Select this style**.
2. Toggle to the **Embed** tab.
3. Copy and paste the font-family name into the font-family field in the module editor.
4. Copy and paste the URL link into the Font URL field in the module editor.
5. Click **Update**.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/59f58eea-6e7e-4911-bf51-334c86626db1.png?sv=2026-02-06&spr=https&st=2026-10-31T10%3A08%3A07Z&se=2026-10-31T11%3A08%3A07Z&sr=c&sp=r&sig=tO6x%2BtAhlIqnEIl5Ima01soDEvHXGI3FWMkTnYfSYIM%3D)
		  
You should now see your new font rendered in your module editor preview.

### Custom font URL

If you wish to a custom font that isn't a Google font, simply add the font name and URL.

You can upload the font file to a file hosting service such as [filesharing.org](https://www.filesharing.com/) and then receive a URL that can be added to the module.

	
	**Which font file type should I upload?**
	

		

You can upload any font file type, but make sure that the file type is supported on most browsers.

		

We recommend using Web Open Format File (WOFF).

	

### FAQ

**What does font-family name mean?**

	

	

Font-family name is a CSS font-family property.

	

The font-family names are "times", "courier", "arial", etc.

**What are Google fonts?**

	

	

Google fonts aren’t different than any other custom font (or paid font)They are just a free and widely used option.

	

The benefit of Google fonts is they don't require manual hosting, since you can just use the embed link. Meaning unlike other fonts, there is no need to host the font files.