Font size on About Us page

Technical Q&A

Topic summary

A Shopify store owner seeks help adjusting the font size on their About Us page to match the site’s body text and footer ‘quick links’ size.

Multiple Solutions Provided:

Four different responders offered CSS-based solutions, each with slightly different approaches:

  • Solution 1 (Moeed): Add custom CSS via theme.liquid file above the </body> tag
  • Solution 2 (Made4uo-Ribe): Modify base.css/style.css/theme.css with specific CSS targeting the page title and RTE span elements, using calculated font sizes
  • Solution 3 (LizHoang): Add simpler CSS to base.css targeting all span elements with a fixed 28px font size
  • Solution 4 (DaisyVo): Insert conditional CSS in theme.liquid before </head> tag, though this targets a collections page URL rather than the About Us page

Follow-up Issue:

DaisyVo posted a correction requesting removal of an erroneous line of code from their initial solution.

Status: The discussion remains open with no confirmed resolution from the original poster regarding which solution worked best.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

hi, my website is www.infinitewonder.co.uk & I’d like the About Us page font changing to be the same as the rest of my website body. I’d also like the font to be a similar size to the ‘quick links’ font size at the bottom of the page. Please help :slightly_smiling_face: TIA

2 Likes
2

Hey @amileazoe

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1740863241233.png
Moeed_0-1740863241233.png993×890 288 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @amileazoe

To change the font size. Check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    font-size: calc(var(--font-heading-scale)* 4rem) !important;
}

.rte span {
    font-size: calc(var(--font-heading-scale)* 1.8rem) !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
4

Hi @amileazoe

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

span {
    font-size: 28px !important;
}

Result

LizHoang_0-1740892655263.png
LizHoang_0-1740892655263.png1703×781 181 KB

Best,

Liz

5

Hi @amileazoe

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Edit code > theme.liquid
  2. Add this code before the 
{% style %}
{% if canonical_url == "https://id0et1-1k.myshopify.com/collections/all" %}
h1.main-page-title.page-title {
    font-size: calc(var(--font-heading-scale)* 1.6rem) !important;
}
{% endif %}
{% endstyle %}
thêm trước

Here is the result:

image_720.png
image_720.png720×429 230 KB

I hope this helps

Best,

Daisy

6

Hi @amileazoe

Please help me, remove this line, it’s wrong.
https://prnt.sc/Yd1o0qKLcl_Y