want to change font of my entire store ,how can i add custom font

zikriarathore
Excursionist
78 1 7

hye

how can i change and add font for my entire store. Also i want to change anouncement bar's text to Bold font and want to add social icons in announcement bar which is on the top.https://37e364.myshopify.com/?_ab=0&_fd=0&_sc=1 

thanks

Replies 6 (6)

Danishshopdev
Shopify Partner
163 17 20

what font you want to use?

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website
helen25
New Member
16 0 0
Hi Danishshopdev,

Go to "Online Store" > "Themes" > "Customize.
You may need to use custom CSS. In the "Additional CSS" section, add:

 

 

body{
font-family: 'as you like font';
}

 

 

topnewyork
Trailblazer
212 25 27

Hi Zikriarathore,

Go to "Online Store" > "Themes" > "Customize.
You may need to use custom CSS. In the "Additional CSS" section, add:

 

.announcement-bar {
  font-weight: bold;
}

body {
  font-family: 'Your Chosen Font', sans-serif;
}

 


If I managed to help you then, don't forget to Like it and Mark it as Solution!

Need a Shopify developer?
Hire us at topnewyorkwebdesign.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel

techlyser_web
Shopify Partner
1056 204 216

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>
p.announcement-bar__message.h5 span {
   font-weight: 700 !important;
   font-size: 20px !important;
}
</style>

For social media icon you have to add custom code in anouncement.liquid file
custom code:
For example
<div class="socialMediaWrapper">
<p>
<a href="https://facebook.com/your-page" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/your-handle" target="_blank"><i class="fab fa-twitter"></i></a>
<!-- Add more social icons as needed -->
</p>
</div>

techlyser_web_0-1706095926076.png

 

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
zikriarathore
Excursionist
78 1 7

where is this file announcement.liquid and where to add this code ?at the end?

Danishshopdev
Shopify Partner
163 17 20

Hey @zikriarathore , you can add me as staff, i will help you with that, by  following shopify community rules i cnt share my details here, you can find it from my signture. i will be waiting.

Danish | Full Stack Developer @ Esire.Inc
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Hire me for your next task! | Email | WhatsApp| Website