Re: adding font to shopify

GlennK92 · ‎06-15-2023

Hello Everyone,

Could you please help me.

Want to add a font to the store. Tried doing it with the font files added to files and then this as code.

@font-face {
font-family: "Monument Grotesk";
src: url("MonumentGrotesk-MediumItalic.eot");
src: local("Monument Grotesk Medium Italic"),
local("MonumentGrotesk-MediumItalic"),
url("MonumentGrotesk-MediumItalic.eot?#iefix") format("embedded-opentype"),
url("MonumentGrotesk-MediumItalic.woff2") format("woff2"),
url("MonumentGrotesk-MediumItalic.woff") format("woff"),
url("MonumentGrotesk-MediumItalic.ttf") format("truetype");
font-weight: 500;
font-style: italic;
}

But for some reason it does not seem to work.

PS: Forgot to say also added a css file with the fonts in it and the fonts seperate to assets within the code but it does not seem to work.

Best,

Glenn

ZestardTech · ‎06-15-2023

Hello @GlennK92

To add a custom font to your Shopify store, you can follow these steps:

Upload the font files to your Shopify theme files. Make sure you have the font files (e.g., MonumentGrotesk-MediumItalic.eot, MonumentGrotesk-MediumItalic.woff2, MonumentGrotesk-MediumItalic.woff, MonumentGrotesk-MediumItalic.ttf) ready.
From your Shopify admin panel, go to "Online Store" and then "Themes."
Locate the theme you're currently using and click on the "Actions" button next to it. Select "Edit code" from the dropdown menu.
In the code editor, find the "Assets" folder on the left sidebar and click on it. Then click on the "Add a new asset" button.
Upload each font file by selecting the corresponding file and clicking on the "Upload" button.
After uploading the font files, find the "Theme.liquid" file in the "Layout" folder on the left sidebar and click on it to open it.
Inside the "Theme.liquid" file, find the <head> tag. It is usually located near the top of the file.
Paste the following code snippet just above the closing </head> tag:

<style>
  @font-face {
    font-family: "Monument Grotesk";
    src: url("{{ 'MonumentGrotesk-MediumItalic.eot' | asset_url }}");
    src: local("Monument Grotesk Medium Italic"),
         local("MonumentGrotesk-MediumItalic"),
         url("{{ 'MonumentGrotesk-MediumItalic.eot' | asset_url }}?#iefix") format("embedded-opentype"),
         url("{{ 'MonumentGrotesk-MediumItalic.woff2' | asset_url }}") format("woff2"),
         url("{{ 'MonumentGrotesk-MediumItalic.woff' | asset_url }}") format("woff"),
         url("{{ 'MonumentGrotesk-MediumItalic.ttf' | asset_url }}") format("truetype");
    font-weight: 500;
    font-style: italic;
  }
</style>

Make sure the URLs in the src property match the filenames you uploaded.

Click on the "Save" button to save the changes.

Once you've completed these steps, the custom font should be added to your Shopify store. You can then use the font-family: "Monument Grotesk"; property in your CSS to apply the font to specific elements on your store.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech · ‎06-15-2023

Hello @GlennK92

To add a custom font to your Shopify store, you can follow these steps:

Upload the font files to your Shopify theme files. Make sure you have the font files (e.g., MonumentGrotesk-MediumItalic.eot, MonumentGrotesk-MediumItalic.woff2, MonumentGrotesk-MediumItalic.woff, MonumentGrotesk-MediumItalic.ttf) ready.
From your Shopify admin panel, go to "Online Store" and then "Themes."
Locate the theme you're currently using and click on the "Actions" button next to it. Select "Edit code" from the dropdown menu.
In the code editor, find the "Assets" folder on the left sidebar and click on it. Then click on the "Add a new asset" button.
Upload each font file by selecting the corresponding file and clicking on the "Upload" button.
After uploading the font files, find the "Theme.liquid" file in the "Layout" folder on the left sidebar and click on it to open it.
Inside the "Theme.liquid" file, find the <head> tag. It is usually located near the top of the file.
Paste the following code snippet just above the closing </head> tag:

<style>
  @font-face {
    font-family: "Monument Grotesk";
    src: url("{{ 'MonumentGrotesk-MediumItalic.eot' | asset_url }}");
    src: local("Monument Grotesk Medium Italic"),
         local("MonumentGrotesk-MediumItalic"),
         url("{{ 'MonumentGrotesk-MediumItalic.eot' | asset_url }}?#iefix") format("embedded-opentype"),
         url("{{ 'MonumentGrotesk-MediumItalic.woff2' | asset_url }}") format("woff2"),
         url("{{ 'MonumentGrotesk-MediumItalic.woff' | asset_url }}") format("woff"),
         url("{{ 'MonumentGrotesk-MediumItalic.ttf' | asset_url }}") format("truetype");
    font-weight: 500;
    font-style: italic;
  }
</style>

Make sure the URLs in the src property match the filenames you uploaded.

Click on the "Save" button to save the changes.

Once you've completed these steps, the custom font should be added to your Shopify store. You can then use the font-family: "Monument Grotesk"; property in your CSS to apply the font to specific elements on your store.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

GlennK92 · ‎06-15-2023

Hello @ZestardTech ,

Is it then also possible to edit it through typography in the Shopify editor?

Most off the site needs to be edited, thats why i hoped to be able to do it this way. 🙂

best,

Glenn

ZestardTech · ‎06-15-2023

Hello @GlennK92

Yes, in Shopify, you can edit the typography of your store's elements using the built-in typography settings in the theme editor. Here's how you can do it:

Log in to your Shopify admin.
Navigate to "Online Store" and click on "Themes."
Find the theme you are using and click on "Customize" next to it.
In the theme editor, look for a section or panel related to typography or fonts. The location and name may vary depending on the theme you're using.
Within the typography settings, you should see options to modify various elements such as headings, paragraphs, buttons, and more. Typically, you can change the font family, size, weight, and style for each element.
Locate the specific element you want to edit, such as the body text or heading text, and make the desired changes to the font settings.
Save your changes.

Keep in mind that the available typography options may vary depending on your theme and its settings. Some themes may provide more extensive typography customization options, while others may offer limited choices.

By using the typography settings in the Shopify theme editor, you can modify the font styles of different elements without directly editing the CSS or HTML code. This allows you to customize the typography of your store easily and efficiently.

If your theme doesn't provide enough typography options for your needs, you may consider using custom CSS to override or extend the styles. However, modifying the theme's CSS requires knowledge of CSS and may involve editing the theme code or using additional apps or customizations.

Remember to preview your changes before publishing them to ensure they look as expected on your live store.

I hope this helps! Let me know if you have any further questions.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

GlennK92 · ‎06-15-2023

Hello @ZestardTech ,

But the custom font I just added with your help does not come up, or does this font only show with custom css?

Thank you for the explaination!

Can use all the info about Shopify and how to use it! 😄

Best,

Glenn

ZestardTech · ‎06-15-2023

Hello @GlennK92

The custom font you added using the @font-face rule in CSS will not automatically show up in the typography settings of the Shopify theme editor. The typography settings in the theme editor are typically designed to work with the fonts included in the theme itself or the fonts provided by Shopify.

If you want to use the custom font you added with the @font-face rule, you would need to apply it through custom CSS rather than relying solely on the theme editor's typography settings.

To use the custom font with custom CSS in Shopify, you can follow these steps:

1. Open the Shopify theme editor for your store as described in the previous response.
2. Look for a section or panel in the theme editor where you can add custom CSS. It may be labeled as "Custom CSS," "Additional CSS," or something similar.

3.In the custom CSS section, you can apply the custom font to the desired elements using the font-family property, similar to the example I provided earlier:

body {
font-family: "Monument Grotesk", sans-serif;
}

Here, "Monument Grotesk" should be replaced with the actual font name you specified in the @font-face rule.

4. Save your changes.

By adding the custom CSS with the font-family property, you can override the default font styles and apply your custom font to specific elements or classes on your website.

Keep in mind that applying custom CSS may require a theme that allows for such modifications or the use of a custom or third-party theme. Additionally, if your theme has a built-in option to add custom CSS code, you may need to enable it or check the theme's documentation for specific instructions.

If you have further questions or need more assistance with Shopify or any other topic, feel free to ask!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

GlennK92 · ‎06-15-2023

Hey @ZestardTech ,

Thank you very much for all the information! It will be some work but now I understand what needs to be done. This will get me allot further!

Best,

Glenn

ZestardTech · ‎06-15-2023

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Adyctive · ‎02-27-2024

Hey all,

I've just read your messages!
So I imported 6 files of the "Nourd" font into the "assets" folder, named as follows :

- nourd_bold.ttf
- nourd_heavy.ttf
- nourd_light.ttf
- nourd_medium.ttf
- nourd_regular.ttf
- nourd_semi_bold.ttf

Can you help me with the code to paste in theme.liquid file ?

Thanks a lot,

Audrey -

docasar · ‎03-13-2024

I am very interested also in the same logic, since I would need to be able to handle the font weight or style with the help of css

GlennK92 · ‎03-13-2024

@docasarThe screenshots in this answer come from the browser Mozilla Firefox. This works the same on Google Chrome and Edge only the layouts are slightly different.

When you are on your website you can press right mouse button anywhere on the background. And then select inspect.Like shown in the picture underneath.

Then the following screen pops up, when you press on the mouse button in the left corner, you can hover over your site to inspect certain ares of the page. You can see the class id's which you can try and target. Sometimes it can be a bit of a search, but you can try and change your site through this inspect option in a browser. When it seems to work you can try and do the edits in your theme file. Sometimes it does not work as you like. Then you would have to search further. Can be a pain in the ass sometimes.

Hopefully this answer is what you were looking for.

Have a great day,

Glenn

GlennK92 · ‎03-13-2024

Hello @ZestardTech ,

Could you maybe help Audrey with this, since your knowledge in Shopify helped me and many others.

I am not sure how to go further with this.

Best,

Glenn

neeley01 · ‎08-09-2024

Hello, i followed these steps but using the font-family property in my css is not working. Are you able to take a look and let me know what i missed?

I added google font Bebas Neue

https://shesthatgirldolls.com/

pw: stg2024

thank you!

GlennK92 · ‎08-12-2024

Hello Neeley01,

Did you try this as well?

Hello @GlennK92

Yes, in Shopify, you can edit the typography of your store's elements using the built-in typography settings in the theme editor. Here's how you can do it:

Log in to your Shopify admin.
Navigate to "Online Store" and click on "Themes."
Find the theme you are using and click on "Customize" next to it.
In the theme editor, look for a section or panel related to typography or fonts. The location and name may vary depending on the theme you're using.
Within the typography settings, you should see options to modify various elements such as headings, paragraphs, buttons, and more. Typically, you can change the font family, size, weight, and style for each element.
Locate the specific element you want to edit, such as the body text or heading text, and make the desired changes to the font settings.
Save your changes.

Keep in mind that the available typography options may vary depending on your theme and its settings. Some themes may provide more extensive typography customization options, while others may offer limited choices.

By using the typography settings in the Shopify theme editor, you can modify the font styles of different elements without directly editing the CSS or HTML code. This allows you to customize the typography of your store easily and efficiently.

If your theme doesn't provide enough typography options for your needs, you may consider using custom CSS to override or extend the styles. However, modifying the theme's CSS requires knowledge of CSS and may involve editing the theme code or using additional apps or customizations.

Remember to preview your changes before publishing them to ensure they look as expected on your live store.

I hope this helps! Let me know if you have any further questions.

Best Glenn

MRamzan · ‎04-11-2024

Yes you can add custom fonts in your store without any App.

Here are the steps to follow.

Hire Me:

WhatsApp: +91-9145985880
Email: mohdramzaan112@gmail.com
Skype: mohdramzaan112

neeley01 · ‎08-16-2024

thank you for this! i was able to figure it out after watching this, the theme applied wanted it implemented in a different way but i was able to locate that info while trying to implement it this way, thanks again!!!

Re: adding font to shopify

How can I successfully add a new font to my online store?

Community Blog Articles