Salient theme Modify heading 1 font

  • Greetings,

    Hoping someone can help me figure out what’s wrong with my child css script (I’m assuming this is the problem). I want to add a font (Good dog) to heading 1, which is not part of the standard theme set up.

    I created a child theme which is activated (Theme supplier created a template child css and php which I added to).

    Directly within the child folder I have installed the 4 font types (as instructed by Fontspring supplier of font), my style.css and function.php. Fontspring has helped me get to this stage (with coding for font), but they can’t figure out why it’s not working.

    Any help would be greatly appreciated

    Below is a copy of my css

    /*
    Theme Name: Salient Child Theme
    Theme URI: http: //justoutsidetheboxcartoon.com/
    Description: This is a custom child theme for Salient
    Author: Martina
    Author URI: http: //justoutsidetheboxcartoon.com/
    Template: salient
    Version: 0.1
    */

    @import url(“../salient/style.css”);

    @font-face {
    font-family: ‘gooddogregular’;
    src: url(‘gooddog-webfont.eot’);
    src: url(‘gooddog-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘gooddog-webfont.woff2’) format(‘woff2’),
    url(‘gooddog-webfont.woff’) format(‘woff’),
    url(‘gooddog-webfont.ttf’) format(‘truetype’),
    url(‘gooddog-webfont.svg#gooddogregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    h1 {
    font-family: ‘gooddogregular’;
    font-size: 24px;
    }

    And if it helps, here is my functions.php which I created enqueue scripts copied from WP Codex site for setting up a child theme

    <?php

    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
    function theme_enqueue_styles() {
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array(‘parent-style’)
    );
    }

    ?>

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

  • Can you post a link to your site with the child theme active?

    Thread Starter Marti42

    (@marti42)

    Sorry, I thought my website was attached to my ID as part of the set up

    https://www.justoutsidetheboxcartoon.com

    Martina

    You have a couple of syntax errors in your child theme’s stylesheet. h1 shouldn’t be in parentheses and you’ve got curly quotes instead of straight quotes in your font-family rules.

    It looks like your selectors aren’t specific enough, too. This should change the heading on the flowered background, above “Fun | Books | Cartoons | Freebies | Kitchen Sink”:

    body .swiper-slide .content h2 {
	font-family: 'gooddogregular';
}

    Which other headings are you trying to change? The only other ones I saw were in images.

    Thread Starter Marti42

    (@marti42)

    Hiya Stephen,

    Many thanks for helping.

    I’m new to this, so I don’t think I quite understand “h1 shouldn’t be in parentheses and you’ve got curly quotes instead of straight quotes in your font-family rules.” and how this translates into the code. The font family rules (that’s the @font-face?) was supplied by the Font supplier, but I have changed the curlies. So here is another copy and paste of my new child css below so you can see what I’ve done.

    I might have lead you astray leading you to my home page as I haven’t used header 1 there. I am using it here,
    https://justoutsidetheboxcartoon.com/guess-whos-crashed-the-party/
    in my blog posts, with the green heading titled “Maybe you don’t have an Ohrwurm…”
    and here too
    https://justoutsidetheboxcartoon.com/books/1st-book-the-long-roll-home/

    Also, I can see that your code has changed my heading text with flower background, but instead of good dog, I see something which looks like a bold Times New Roman font.

    My new css

    /*
Theme Name: Salient Child Theme
Theme URI: http: //justoutsidetheboxcartoon.com/
Description: This is a custom child theme for Salient
Author: Martina
Author URI: http: //justoutsidetheboxcartoon.com/
Template: salient
Version: 0.1
*/

@import url("../salient/style.css");

@font-face (
    font-family: 'gooddogregular';
    src: url('gooddog-webfont.eot');
    src: url('gooddog-webfont.eot?#iefix') format('embedded-opentype'),
         url('gooddog-webfont.woff2') format('woff2'),
         url('gooddog-webfont.woff') format('woff'),
         url('gooddog-webfont.ttf') format('truetype'),
         url('gooddog-webfont.svg#gooddogregular') format('svg');
    font-weight: normal;
    font-style: normal;

)

h1 {
    font-family: gooddogregular;
    font-size: 24px;
}

body .swiper-slide .content h2 {
	font-family: 'gooddogregular';
}

    It looks like you’ll need to use more specific selectors to target those headings:

    #page-header-bg h1.entry-title,
.post-content h1 {
	font-family: 'gooddogregular';
}

body .swiper-slide .content h2 {
	font-family: 'gooddogregular';
}
    Thread Starter Marti42

    (@marti42)

    Wow! Thanks Stephen, you’re awesome! I thought it’d never get there. A month ago I didn’t know what FTP was ??

    Only one more thing to trouble you with. It has worked for my blog and flower headers, but it hasn’t worked for all of the other h1’s on other pages, such as:

    https://justoutsidetheboxcartoon.com/books/1st-book-the-long-roll-home/
    https://justoutsidetheboxcartoon.com/faq/
    https://justoutsidetheboxcartoon.com/meet-the-characters/

    Do I need to specify the font h1 for each page? If so, can you please help me one more time? I assume there would some type of formula which would enable me to figure out what the page code name is, so I can apply it to all of my webpages not listed above?

    Martina

    This should cover your <h1> and <h2> tags:

    #page-header-bg h1.entry-title,
.main-content h1,
.main-content h2 {
	font-family: 'gooddogregular';
        font-size: 30px;
}

.main-content h1 b,
.main-content h1 strong {
	font-family: 'gooddogregular';
}

body .swiper-slide .content h2 {
	font-family: 'gooddogregular';
        font-size: 60px;
}

    I’d suggest reading up on CSS specificity if you’d like to understand exactly why the rules are written the way they are. This is a good starting point: https://css-tricks.com/specifics-on-css-specificity/, and there are many more resources out there, too. I’d also recommend learning how to use a web inspecting tool like Firebug. This is another good starting point: https://www.themesandco.com/snippet/firebug-best-spent-6-minutes/

    Thread Starter Marti42

    (@marti42)

    Many thanks Stephen. It’s worked a treat.

    Also, the websites sent through are very good. You can find many things on Google, but sometimes it’s hard to find where to start, especially when your new to a topic. I also like the humour and colour in the first site – makes for a more interesting read.

    Have a great weekend!

    Martina

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Salient theme Modify heading 1 font’ is closed to new replies.