HOW2 SHOPIFY ! HOT TO CHANGE YOUR SITES FONT !

HOW2 SHOPIFY ! HOT TO CHANGE YOUR SITES FONT !

aop3d tech

You can change the font in two ways: the easy way (which changes fonts across your entire site to keep it consistent) or the advanced way (which targets only your blog posts using a little bit of code).

Since you mentioned the text is "extremely hard to read," the issue might be the size or spacing rather than just the font family itself.

Here is how to fix it:

Method 1: The Easy Way (Global Settings)

This changes the font for your whole store (pages, products, and blogs). This is usually best because it keeps your branding consistent.

  1. Go to your Shopify Admin > Online Store > Themes.

  2. Click the Customize button next to your current theme.

  3. On the left-hand sidebar, click the Gear Icon (Theme Settings).

  4. Select Typography.

  5. Here you can adjust:

    • Body Text: Change the "Font" to something cleaner (like Inter, Roboto, or Open Sans are very readable).

    • Font Size Scale: Bump this up! If it’s set to 100%, try 110% or 120%.

  6. Preview a blog post in the main window to see if it looks better.

  7. Click Save.

Method 2: The "Blog Only" Way (Requires Code)

If you like your font elsewhere but only want to change it on blog posts (e.g., to make it larger or a different style just for articles), you need to add a small snippet of code.

  1. Go to Online Store > Themes.

  2. Click the three dots (...) next to your theme and select Edit code.

  3. In the search bar on the left, type base.css or theme.css. (Click the file when it appears).

  4. Scroll to the very bottom of that file and paste this code:

CSS 

/* Change Font for Blog Posts Only */
.article-template__content {
  font-family: 'Helvetica', 'Arial', sans-serif; /* Change to your preferred font */
  font-size: 18px; /* Adjust size as needed */
  line-height: 1.6; /* Increases space between lines for readability */
  color: #000000; /* Ensures text is dark black for contrast */
}

Note: This code targets the standard "Dawn" theme structure. If you are using a different theme, the class name .article-template__content might be slightly different.

  1. Click Save.

Quick Readability Tips

If the font is hard to read, check these three things immediately:

  • Contrast: Is the text dark enough against the background? (Avoid grey text on white).

  • Line Height: If lines are too close together, it looks like a wall of text. Aim for a line height of 1.5 or 1.6.

  • Font Size: For blog posts, 16px is the absolute minimum standard; 18px or 20px is much better for modern reading.


Back to blog