Re: Change body font to Google Font: IBM Plex Mono (regular)

Change body font to Google Font: IBM Plex Mono (regular)

bensutrecht030
Shopify Partner
6 0 4

Hi,

 

Im having problems with adding the google font IBM Plex Mono (regular 400) to my store. This is the link of the google font website: https://fonts.google.com/specimen/IBM+Plex+Mono.  There is no IBM Plex Mono in shopify it self. Only IBM Plex Sans. Here is the website link where i found the font:https://fonts.google.com/specimen/IBM+Plex+Mono

 

bensutrecht030_0-1693066534201.png

bensutrecht030_1-1693066573918.png

 

Can someone help me out?

 

 

Reply 1 (1)

PageFly-Richard
Shopify Partner
4400 1006 1657

Hi @bensutrecht030 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Step 1: Find your preferred Google font

Visit the Google Fonts  site and choose your font.

You’ll see that you’re able to filter your fonts by a few different criteria, including category, language, font properties, most popular, newest, name, or even trending.

PageFlyRichard_0-1693137906203.webp

 

Step 2: Dig into font details, select your font, and copy the code

Once you click on the font of your choice, you can adjust the font size, check out the glyphs, the License, and even what other fonts it pairs best with.

Take some time to play around with it to see what is the best font to use for your Shopify store .

Once you click the “Select this style” button, you’ll be able to copy the code from the pop-up window.

PageFlyRichard_1-1693137906118.webp

 

PageFlyRichard_2-1693137906167.webp

 

Step 3: Go to your theme files and paste the code in the head tag

Once you’ve copied your code from your Shopify dashboard, navigate to Online Store > Themes > Actions > Edit Code. 

Click on Layout > theme.liquid.

From there, scroll down and find the </head> tag, and paste the code just before the tag. Save your changes once you’re finished.

PageFlyRichard_3-1693137906061.webp

 

PageFlyRichard_4-1693137906205.webp

 

Step 4: Open your theme’s style files

Next, go to the “Assets” folder. You will find the two style files named “theme.scss.liquid” and “timber.scss.liquid”. Open them.

PageFlyRichard_5-1693137906823.png

 

Step 5: From Google, copy font CSS rules

Go back to the page of the Google Font you are using. There you will need to copy the font name. In my case, it’s “‘Lato’, sans-serif;”.

PageFlyRichard_6-1693137906235.webp

 

Step 6: Add font details to style files

And then finally, go back to the previous style files that you opened in the Assets folder.  Scroll down to the “Typography” section and replace these 3 code lines:

$headerFontStack: {{ header_family.family }}, {{ header_family.fallback_families }};

$bodyFontStack: {{ base_family.family }}, {{ base_family.fallback_families }};

$accentFontStack: {{ accent_family.family }}, {{ accent_family.fallback_families }};

with:

$headerFontStack: ‘Rampart One’, cursive;

$bodyFontStack: ‘Rampart One’, cursive;

$accentFontStack: ‘Rampart One’, cursive;

PageFlyRichard_7-1693137906942.png

 

Now, for the easier way of using Google Fonts.

Hope you find my answer helpful!
Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.