---
title: "Adding a Custom Font to your Widget"
slug: "adding-a-custom-font-to-your-widget"
tags: ["Reviews ", "Shopify Plus", "Shopify"]
updated: 2024-04-01T23:28:02Z
published: 2024-04-01T23:28:02Z
canonical: "support.yotpo.com/adding-a-custom-font-to-your-widget"
---

> ## 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 your Widget

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Free, Starter, Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus

			

Want to display a font in your widget that is not on our list of predefined fonts? Easily upload your own directly from the widget editor.

## Adding a custom font

To add a custom font:

1. From the relevant widget editor, under Fonts, click **Add Font**.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/fee00748-eb03-42b4-baa3-738cbbb526c9.gif?sv=2026-02-06&spr=https&st=2026-11-10T16%3A22%3A29Z&se=2026-11-10T17%3A22%3A29Z&sr=c&sp=r&sig=93Gb%2B5M2gZ7gGPXxIGzIrsA7K1arPUzqPwvNofDFhQI%3D)
2. Complete the following fields:
  1. **Font-family name (required**) - Enter the font-family name that you want to use on this widget. If you want, you can [use Google fonts](/v1/docs/) to browse fonts and locate the font-family name.
  2. **Font URL (optional)** - Without a font URL, your font will display on your website, however, it will not be reflected in the editor preview. You can upload the font file to a file hosting service such as [filehosting.org](https://www.filehosting.org/) and then receive a URL that can be added to the font-URL field.

	
	Which font file type should I upload?
	

		

You can upload any font file type, but make sure that file type is supported on most browsers. We recommend using Web Open Format File (WOFF).

	

- **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.

## Adding a Google font

To add 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/b70869fd-2f9f-4d18-bd4d-b3fb23700be2.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A22%3A29Z&se=2026-11-10T17%3A22%3A29Z&sr=c&sp=r&sig=93Gb%2B5M2gZ7gGPXxIGzIrsA7K1arPUzqPwvNofDFhQI%3D)
2. Click **Select this style**.
3. Toggle to the **Embed** tab.
4. Copy and paste the font-family name into the font-family field in the editor.
5. Copy and paste the URL link into the Font URL field in the editor.
6. Click **Update**.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/786f99c6-e752-4585-81f5-2d945eb27f1d.png?sv=2026-02-06&spr=https&st=2026-11-10T16%3A22%3A29Z&se=2026-11-10T17%3A22%3A29Z&sr=c&sp=r&sig=93Gb%2B5M2gZ7gGPXxIGzIrsA7K1arPUzqPwvNofDFhQI%3D)

You should now see your new font rendered in your editor preview.

## 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.