Docs

[jeanetteleblanc]

Hi,
I want to create customized H1..H6 header styles.

I have searched through the archives and tried to use the custom CSS I found there, but it does not seem to be overriding the theme settings for headers.

Specifically – i want to incorporate the fonts Great Vibes and Aileron Thin that my client uses in branding into the Header styles (along with Lato which is used across the site).

How can I go about that?

[Joao]

Hi There,

Can you share the code you found and point which heading you are referring to?

Thanks

Joao

[jeanetteleblanc]

what she would like to achieve for options is:

H1 – Lato – Larger All Caps
H2 – Lato – Medium All Caps
H3 – Lato – small all caps

H4 – Lato Medium no caps

H5 Great Vibes Medium no caps

H6 – Aileron no caps Medium

Can you help me with the CSS to achieve this?

[Lely]

Hi There,

Since most it is Lato, go to Appearance > Customize > Typography > Headings Font: Choose Lato here. Then use the following CSS:

h1, .h1,
h2, .h2,
h3, .h3 {
     text-transform: uppercase !important;
}

h1, .h1{
     font-weight: 700 !important;
}

h2, .h2{
     font-weight: 700 !important;
}

h3, .h3{
     font-weight: 700 !important;
}

/*Adjust font weight per header. See attached screenshot for options*/

h5, .h5{
     font-family: 'Great Vibes', cursive !important;
}

Then add this font declaration on your child theme style.css file on the very first line
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

Aileron is not a google font. If you have it, see this link on how to install custom font:https://community.theme.co/forums/topic/custom-font-2/#post-142444

Hope this helps.

[jeanetteleblanc]

so do all of those style snippits just go in custom CSS?

the @import url(‘https://fonts.googleapis.com/css?family=Great+Vibes’); you specifially said on the top line of the child theme css. I’m not sure if these all go in the same place. I added them but not sure correct.

[jeanetteleblanc]

I don’t think great vibes is showing up right yet – just generic cursive. so i must have done something wrong

[Friech]

Hi There,

Add the @import statement on your child theme’s style.css file, just below the child theme information comments.

@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

Then add the custom CSS Lely provided above on your Custom > Global CSS on Customizer to apply those styling on your headers.

If that did not work, Please provide us your site URL so we can take a closer look.

Thanks.

[jeanetteleblanc]

I think i’m not sure how to get to the child theme css…

the url is rachaelmaddox.com

[Friech]

Hi There,

The site seems does not have a child theme yet, please install a child theme first. Follow the guide provided on the link below.

How to Setup Child Themes

Let us know how it goes.

Thanks.

[Author]

Posts