Change h1, h2, h3 Font and Font Size

Viewing 2 replies - 1 through 2 (of 2 total)

  • wp-admin > appearance > theme options > typography gives some options to change your themes title options but if that fails you could always play around with some CSS

    h1, h1 a, h2, h2 a, h3, h3 a {
font-size: 1.3em !important;
font-family: 'Roboto',arial,sans-serif !important;
}

    or even extend the CSS to make titles more responsive 

    @media (max-width: 1200px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: 1.3em !important; }
}
@media (max-width: 1000px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: 1.2em !important; }
}
@media (max-width: 700px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: 1.1em !important; }
}
@media (max-width: 600px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: 1em !important; }
}
@media (max-width: 550px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: 1.em !important; }
}
@media (max-width: 500px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: .95em !important; }
}
@media (max-width: 450px) {
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-size: .9em !important;
font-weight: 700 !important;
    Thread Starter Jade-Snow

    (@jade-snow)

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change h1, h2, h3 Font and Font Size’ is closed to new replies.