Dawn theme - reduce and unify overall titles

Store Design
1

Hello!

I’m changing my theme to Dawn but before I post it, I want to unify the titles because the options are very limited. I want my titles to be elegant and small, with Montserrat font which I already selected, and with a little bit of kerning. I want, for example in the multicolumn section to be something like this:

Screen Shot 2022-09-08 at 09.11.03.png
Screen Shot 2022-09-08 at 09.11.03.png1380×323 12.8 KB

I tried with multiple codes at the liquid section and got only to the uppercase coding but I really want to unify every title on my overall website like so:

-Titles in Monserrat font (already done), uppercase, a little bit of kerning, 12px, centered

I want something like this:

https://pearlbeautycosmetics.com

I also want the main menu to be on Monserrat font instead of the paragraph one.

My unpublished website dawn theme design es this (link only available for 2 days):

https://2xai18mzvh2wc3gw-754516020.shopifypreview.com

Thank you

2

Hi @Fulares_Kargo ,

Go to Assets > base.css and paste this at the bottom of the file:

/* - code desktop - */
@media only screen and (min-width: 750px) {
	.shopify-section h2, 
	.shopify-section .h2 {
		font-size: 12.5px;
		letter-spacing: 1px;
	}
}
/* - code mobile - */
.shopify-section h2, 
.shopify-section .h2 {
	    font-size: 12.5px;
    letter-spacing: 1px;
}

You can change the font size to your liking.

3

Thank you so much, it worked! But is there a way the banner title size comes back the way it was? It shrunk as well… and also (i’m sorry for the bother) is there a way to change the main menu font as well? like so:

howto.png
howto.png1261×639 601 KB

4

Hi @Fulares_Kargo ,

Please send me the preview link, I will check it for you

5

https://mbyg8305bdxnsn2z-754516020.shopifypreview.com

thank you so much!!!

6

Hi @Fulares_Kargo ,

1: Main menu:

Go to Assets > base.css and paste this at the bottom of the file:

.header__menu-item span {
    text-transform: uppercase !important;
    font-family: var(--font-heading-family) !important;
}

2: Image banner: Please change my previous tutorial code:

/* - code desktop - */
@media only screen and (min-width: 750px) {
	.shopify-section h2.h2 {
		font-size: 12.5px;
		letter-spacing: 1px;
	}
}
/* - code mobile - */
.shopify-section h2.h2 {
	    font-size: 12.5px;
    letter-spacing: 1px;
}

Hope it helps!

7

It worked! Thank you for taking the time to do this. I appreciate it so very much :heart: