How can I add a custom font to my online store?

Store Design
1

Hello,

I would like to add a custom font on my Shopify store, exactly like on this site: https://yukata.us/

The logo and a title below are in a font that I could not find on Shopify.

How do I proceed?

I have already followed tutorials that talked about webfont but it did not work on my store. I did put in the theme.css file “{{ font.woff | asset_url }}”, but it put me in a basic font instead.

Thanks in advance.

2

Hi @Thomas86

This is Victor from PageFly - Shopify Page Builder App

We will have the following steps:

Step1: You will need to download the font and convert it to woff2 format

Step2: You will need to upload that font to the assets file

PageFlyVictor_0-1675215511428.png
PageFlyVictor_0-1675215511428.png399×183 28.3 KB

Then you can add it to base.css or style.scss or theme.css of theme.scss like this: here is an example

PageFlyVictor_1-1675215551872.png
PageFlyVictor_1-1675215551872.png399×183 28.3 KB

Then we can use for any element:

PageFlyVictor_2-1675215574098.png
PageFlyVictor_2-1675215574098.png399×183 28.3 KB

This is example for proxima font, about the font you want is LoStar, you can do the same way to have it on your store.
Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Hello @Thomas86

I would like to give you the recommendation to support you so kindly follow steps below:

Step 1: From your Shopify Admin, navigate Setting section and select “File”.

Step 2: Upload your Font File by selecting “Upload file”.

Step 3: The opened window will allow you to select the font file to add. As an example, in this article, we are trying to upload a font called “Yumin”. After having successfully uploaded the file, select the “Link” icon to copy the file link.

Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.

Step 5: Add the following codes at the bottom of the file.

<style>
@font-face {
  font-family: "FontName";
  src: url("Linkofthefontfile");
}
</style>

Replace the below elements of the code with actual data.

  • Font name: the name of the font.
  • Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.

Hit “Save” when finished.

So you can use FontName that you added.

I hope the above is useful to you.
Best regards,
GemPages Support Team