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

[bensutrecht030]

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

Can someone help me out?

[PageFly-Richard]

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.

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.

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.

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.

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;”.

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;

Now, for the easier way of using Google Fonts.

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