Replo allows you to add a font straight from your computer to any Replo content by uploading a font file in the editor. Additionally, Replo auto-magically imports all Google fonts and any fonts from your Shopify theme for use without having to install anything.

Adding a Custom Font via the Editor

When in the editor, simply:

1. Click on any text component.
2. In the text components Design Tab, click the font selector. From here click "Upload Custom Font" and select the desired font file of type .woff or .woff2 from your computer. If you have a different font file type (.ttf or .otf) you can use transfonter or other similar font-conversion tools.
   
3. Just like that we'll upload your font to your Shopify store's Content > Files location and reference it within the editor. It's now free to use. The font's name within the font picker will be the same as the font-file name.

Adding a Custom Font to your Theme

By far the simplest way to get a custom font into Replo is by adding via the Editor, but you can always add your font files directly to your Shopify theme by altering your theme code. This is a good idea if you want the font to be used across your theme and not just Replo content (for example in your header).

To upload font-files to your theme:

1. It's advised that you use .woff or .woff2 files. You'll need to upload these files to you Shopify store's Content > Files location.
2. Within the Content > Files location, copy the font file's link:
   
3. Add the following code to the styles within either your theme's theme.liquid or your base.css file (or any other file that pulls in CSS across your theme). Here <file_type> is either woff of woff2 depending on your specific file. Make sure to save the theme files after this.

@font-face {
  font-family: "<font_name_of_your_choice>";
  src: url("<full_copied_file_ link>") format("<file_type>");
}

Once you refresh the editor, this font should be available to use in Replo content (and across your entire theme!).

You can find more information in the Shopify documentation on this topic.

Troubleshooting

I uploaded my custom font into my Shopify theme, but I still don't see it in Replo.

If you don't see your font in your Replo project, try refreshing the editor. If you still do not see it, please reach out to support@replo.app.

I see my font working on the published page, but it doesn't show up in the Replo Editor

On themes using the Shopify Liquid font_face tag, there can sometimes be issues where in some cases Replo will not be able to load the font in the Replo Editor. If you're not sure if this situation applies to your theme, please reach out to support@replo.app and we can help make sure.

If you need to have the font display in the Replo Editor, you can work with a developer to remove the font_face liquid tag, or upload the custom font via the editor.