Need to change the font to MouseMemoirs-Regular for headings in this page alone.
Topic summary
Goal: change only the page’s section headings to the Mouse Memoirs font on the Kids Baking page (not site‑wide).
Early attempts:
- Added Google Fonts link and CSS in theme.liquid and base.css, or changed Theme Settings > Typography. These either didn’t work initially or applied site‑wide, which was not acceptable.
- A CSS change targeted the menu (.header__inline-menu), which was the wrong element. Another snippet targeted heading classes, but still not page-specific.
Resolution:
- Implemented a Shopify Liquid conditional in theme.liquid to load the Google Fonts resource only when the template/page matches Kids Baking (e.g., {% if template contains ‘page.kids-baking’ %} … {% endif %}).
- After adding the specific page name to the condition, the heading font rendered correctly on that page only.
Notes:
- “theme.liquid” is the main layout file; “base.css” is the theme stylesheet. Liquid conditionals allow per-template or per-page asset loading.
- Screenshots were shared to illustrate code placement and the visual result.
Status: resolved. Action taken was conditional loading of the Mouse Memoirs font for the Kids Baking page only.
Hello @edgeIT
Follow these Steps:
- Go to Online Store
- Edit Code
- Find your layout theme.liquid
- Add the following link in the bottom of the file after end of tag
- Find your file Assets bace.css
- Add the following CSS at the bottom.
See image its working.
If I managed to help you then, don’t forget to Like it and Mark it as a Solution!
Best Regards,
Rakesh patel
Hi Rakesh, this is not working.
What is the issue?
codes have been added, but fonts have not changed.
This will change the font for the entire site. we want to change the font only for headings on a specific page - Kids Baking – The Select Aisle and not on all pages.
It’s your mistake please check the steps and see the image. HTML in declare rules is all link add between – tag
Follow these Steps:
- Go to Online Store
- Edit Code
- Find your layout theme.liquid
- Add the following link in the bottom of the file after end of tag
Dear @edgeIT ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin → Online store → Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
.header__inline-menu {
font-family: MouseMemoirs-Regular;
}
Step 3: Save your code and reload this page.
=>> The result:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Have a nice day sir!
Not the menu but the h2 - see screenshot for the area which needs a change in fonts
base.css in remove tag please its alrady css file. only CSS add
h1, h2, h3, h4, h5, .h0, .h1, .h2, .h3, .h4, .h5 {
font-family: "Mouse Memoirs", sans-serif;
font-weight: 400;
font-style: normal;
}
This will change the font in the entire website. I dont want that. I need font to change only in a specific page - Custom CSS for that specific page mentioned Kids Baking – The Select Aisle. NOT ALL OTHER PAGES.
Hi @edgeIT ,
You can change a little bit in css script to change font-family at the area which needs a change in fonts.
.rich-text__heading.rte.inline-richtext.h1 {
font-family: MouseMemoirs-Regular !important;
}
And the result will be:
I hope these instructions will help you. If they are helpful, don’t forget to like and mark as the solution.
Now previous code add in head tag can be removed and a new CSS link with a particular page added.
{% if template contains 'page.kids-baking' %}
{% endif %}
Even after adding the custom css in the specific section, the correct font does not appear. It shows some other random font.
{% if template contains ‘page.kids-baking’ %} {% endif %} - added the specific page name and it works. thanks @Rakesh_patel_68
Welcome.
If I managed to help you then, don’t forget to Like it and Mark it as a Solution!