How can I alter fonts on my product pages?

Store Design
, , , , ,
1

Hi, I uploaded my own font into my assets and I want to be able to change the body, title, price, Installments message, menu options, and “add to cart” button fonts accordingly.

I want the title, add to cart, and menu options (in my header + in the dropdown of “shops”) font to be Chomsky, the custom font I uploaded. And I want everything else to be the Poppins font. I would like this to apply to each of my product pages.

This is my site. I’m using the Colorblock theme. Thanks!

1 Like
2

Hii @hushbug
You can try this code by following these steps:

  1. Download the Webfont version of your font.
  2. The font files must have the WOFF and WOFF2 file types includedFrom the Shopify dashboard, go to Online Store, click Actions > Edit Code.
  3. Add a New Asset. Choose your Font file and click Upload Asset
  4. choose Assets>theme.scss.liquid
  5. Go to the bottom of this file to add the new code to your theme
@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
  1. Use above font-family name**(myFirstFont)** wherever you want this fonts
3

@hushbug

Shopify font change. Be sure to follow the steps exactly to ensure success.

Step 1

Download the webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not a webfont file types).

Step 2

From your Shopify Admin go to Online Store > Themes > next to the theme you want to edit click Actions > Edit Code. In the sidebar choose Assets > theme.scss.liquid**.** Scroll to the bottom of the file and paste the following code…

@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

Replace NAME OF FONT with the name of your font and NAME OF THE FONT FILE with the exact name (case sensitive with hyphens) of the font file on your computer.

Below this code also pastes the following code…


yourcssselectorhere { font-family: "NAME OF FONT"!important; }

Step 3

Go to the Assets folder and click Add a new asset. Upload each version of the font file one by one.

Step 4

Now that the font is installed, using code we need to tell the theme what headings or text will use our new font. In a new browser, tab go to your website and find the heading or text you want in this font, in this example it is a heading. Right-click on the words and select Inspect.

A window will pop up showing you the code of the site. Look in the right-hand column for the CSS code that is styling your heading. In the example above you will see on the left, highlighted in grey, the heading is an

and on the right, the CSS property selector for the heading is h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6. Click the property name and copy the text.

Go back to the browser tab with the theme code editor and open the theme. scss.liquid file again. Select the words that say “your CSS selector here” and paste what you have already copied. Then replace “NAME OF YOUR FONT” with the name you used before.

Save your changes, refresh your website and have a look at your custom font.

Thanks!

4

@hushbug

Follow this Shopify guideline to know how to add a custom font to your theme

5

I’m confused as to what the CSS property selector and property name is. And if I wanted to copy multiple into “your CSS selector here”, would I separate them by commas? Also, my theme’s code editor doesn’t have theme.scss.liquid under Assets or anywhere. I assume base.css instead works?

6

@dmwwebartisan

I’m confused as to what the CSS property selector and property name is. And if I wanted to copy multiple into “your CSS selector here”, would I separate them by commas? Also, my theme’s code editor doesn’t have theme.scss.liquid under Assets or anywhere. I assume base.css instead works?