Custom Fonts

Using a custom font can greatly enhance and personalize the appearance of your store, giving it a unique and professional feel that will stand out to your audience. In this article, we will guide you through the steps of applying a custom font using the Store Builder.

Important note: The custom font needs to be hosted externally so we can reference its URL.

Applying a Custom Font

You can follow the steps below:

1. First, launch the Store Builder in your Payhip account.
2. Go to Change Store Style > Advanced > Store Pages Custom CSS.
3. Copy and paste the custom CSS into the Store Pages Custom CSS section.
4. Get the Import URL and CSS code from Google Fonts or another font provider.
5. Finally, paste the URL you got from your font provider and the CSS code under the relevant class name.

Here is the CSS code:

@import url('link here');

h1, h2, h3, h4, body, .btn, .custom-style-font-regular, .custom-style-font-heading, 
.custom-style-font-button, .custom-style-font-regular, 
div[class*='font-section-'] 

{paste CSS code here without the descriptive class name}

We've also recorded the steps showing how we incorporated the code generated by Google into our custom CSS code while using Google Fonts as an example.

If you encounter any issues or need assistance with applying the custom font, please do not hesitate to reach out to us.