Changing Fonts in H1, 2, 3, 4, 5 etc

Homepage › Community Forums › Epik Theme Support › Changing Fonts in H1, 2, 3, 4, 5 etc

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 17, 2014 at 5:27 am #10726
    mattfollows
    Customer

      Hi,

      I was wondering how I can exercise complete control over the choice of font I use for each of the headings, navigation and body copy.

      I’m able to change H6 by simply changing Open Sans to Georgia but not sure how to change the other ones.

      Is it possible to?

      Kind regards,

      Matt

      /* Headings
      ——————————————— */

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
      color: #333;
      font-family: ‘Georgia’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
      font-weight: 700;
      line-height: 1.5;
      margin: 0;
      margin-bottom: 16px;
      margin-bottom: 1rem;
      padding: 0;
      }

      h1 {
      font-size: 16px;
      font-size: 2.25rem;
      }

      h2 {
      font-size: 30px;
      font-size: 1.875rem;
      }

      h3 {
      font-size: 24px;
      font-size: 1.5rem;
      }

      h4 {
      font-size: 20px;
      font-size: 1.25rem;
      }

      h5 {
      font-size: 18px;
      font-size: 1.125rem;
      }

      h6 {
      font-size: 16px;
      font-size: 1rem;

      }

      February 17, 2014 at 2:04 pm #10736
      robwallace
      Customer

        Quite easy. Just remove the font-family tag from the catch-all H style (where it is currently) and apply font-family params to each H-tag individually.

        Body font-family is defined in the body tag, of course.

        February 18, 2014 at 2:59 am #10767
        mattfollows
        Customer

          Thanks Rob, i’ll give it a go

          February 18, 2014 at 3:05 am #10768
          mattfollows
          Customer

            Hi again,

            Do you mean delete this bit?

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
            color: #333;
            font-family: ‘Georgia’, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
            font-weight: 700;
            line-height: 1.5;
            margin: 0;
            margin-bottom: 16px;
            margin-bottom: 1rem;
            padding: 0;
            }

            If so, do I then put the styling bit’s from that separately into each of the h styles like this:

            From this:

            h2 {
            font-size: 30px;
            font-size: 1.875rem;
            }

            To this:

            h2 {
            font-size: 30px;
            font-size: 1.875rem;
            color: #333;
            font-family: ‘Georgia’;
            font-weight: 700;
            line-height: 1.5;
            margin: 0;
            margin-bottom: 16px;
            margin-bottom: 1rem;
            padding: 0;
            }

            And if so, does the font I want to use i.e. Georgie have to have the apostrophes either side of it like above? I’m assuming I can remove them as each other line in the code doesn’t have them?

            Thanks!

            Matt

            February 19, 2014 at 11:57 am #10791
            mattfollows
            Customer

              Hi there, is anybody able to comment on the above?

              Kind regards,

              Matt

              March 3, 2014 at 5:36 pm #11118
              chencho
              Customer

                I have no way to change Open Sans font in Epik 🙁

                Try to add at end to css:

                h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span {
	font-family: times;
}

                And into functions change

                wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700', array(), PARENT_THEME_VERSION );

                to

                wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Alef:300,400,700', array(), PARENT_THEME_VERSION );

                But there is no way!

                March 3, 2014 at 9:45 pm #11123
                Eric
                Customer

                  Yes you can change the font easily, you just need to remove the areas in the css that the font is being used in. You don’t need to remove anything from your functions file….just find out what section you want to change, and then look in your css for the code that it’s styled with.

                  I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                • Author
                  Posts
                Viewing 7 posts - 1 through 7 (of 7 total)
                • You must be logged in to reply to this topic.