Custom font - flexible size and keep center position in container across devices - Dawn

Custom font - flexible size and keep center position in container across devices - Dawn

ManuelH
Explorer
84 4 13

homedarlings.com, Dawn theme

 

I am trying to figure out how to: 

 

Customize the heading font of the rich text section to be the "Arapey" font

Make the font flexible to adjust its size and position relative to the container depending on the device type. it should always be centered of course

ManuelH_1-1711285315662.png

 

I know how to change it to "times new roman" but Arapey doesnt work

 

thanks in advance

 

 

 

Replies 2 (2)

techlyser_web
Shopify Partner
1849 345 373

Hello @ManuelH 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
  #shopify-section-template--20261126275396__rich_text_FVEVBX h2 {
      font-family: Arapey !important;
  }
  #shopify-section-template--20261126275396__rich_text_FVEVBX .content-container {
       align-items: center !important;
       justify-content: center !important;
      display: flex !important;
  }
@media screen and(max-width: 767px){
   #shopify-section-template--20261126275396__rich_text_FVEVBX h2 {
       font-size: 4rem !important;
   }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

PageFly-Noah
Shopify Partner
1317 233 268

 

This is Noah from PageFly - Shopify Page Builder App

 

 You can change font-family and change font size by add below code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
.isolate .rich-text .rich-text__wrapper .rich-text__blocks .rich-text__heading{
    font-family: Arapey !important;
    text-align: center !important;
}
/* CSS font size for screen mobile */
@media only screen and (max-width: 767px) {
   .isolate .rich-text .rich-text__wrapper .rich-text__blocks .rich-text__heading{
  font-size: 50px !important;
}
}
/* CSS font size for screen larger mobile */
/*you can chagne 50px to param other*/
@media only screen and (min-width: 768px) {
.isolate .rich-text .rich-text__wrapper .rich-text__blocks .rich-text__heading{
    font-size: 50px !important;
}
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

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