Re: How To Change Font And Font Size For Blog Posts Only (Dawn Theme)

Solved

How To Change Font And Font Size For Blog Posts Only (Dawn Theme)

jeremymac
Excursionist
16 0 3

Hello,

 

I'm trying to change the font & font size of my blog posts (individual blog post pages) in the Dawn theme. However, I don't want to change the font & font size anywhere else on my site, just the individual blog posts.


Is this possible?

 

Thanks in advance for your help!

 

Jeremy

Accepted Solution (1)
theycallmemakka
Shopify Partner
1552 354 381

This is an accepted solution.

Hi @jeremymac ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </head> tag

<style>
.article-template__content {
    font-size: 16px!important;
    font-family: Roboto!important;
}
</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

View solution in original post

Replies 6 (6)

theycallmemakka
Shopify Partner
1552 354 381

Can you provide link to your store? Also let me know which font and font size do you want on the article page.

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

theycallmemakka
Shopify Partner
1552 354 381

This is an accepted solution.

Hi @jeremymac ,

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </head> tag

<style>
.article-template__content {
    font-size: 16px!important;
    font-family: Roboto!important;
}
</style>

 

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
Makka

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

jeremymac
Excursionist
16 0 3

This worked, thank you!

Shay
Shopify Staff
3006 463 616

Hi @jeremymac 

 

The blog post content editor supports basic HTML and you can set the font style and sizing by adding a couple of pieces to your blog posts. 

 

You can copy and paste this snippet into any of your blog post content, using the HTML function (</>). Insert your blog content where you see the text "This is a test." and it will apply the sizing and font type of your choice. 

 

<p><span style="font-family:Roboto"><span style="font-size:16px">This is a test.</span></span></p>

 

<span style="font-family:Roboto"> - Change Roboto to your preferred font style, so long as the customers browser style supports it that is how your body text will be displayed on that blog post.

 

<span style="font-size:16px"> - Change the font size by increasing or decreasing the px (pixel) number.

 

You can also use a free HTML editor like this one to make your changes: Free online HTML editor - onlinehtmleditor.dev. While this one doesn't have Roboto as a font style, you can add it into the HTML editor view and it will change the text for you. Let me know if you have any questions!

Shay | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

PageFly-Oliver
Shopify Partner
878 190 176

Hi @jeremymac ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

{% if template content "blog" %}
<style>
#MainContent .article-template__content {
    font-size: 16px!important;
    font-family: Roboto!important;
}
</style>
{% endif %}

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | 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.