Cannot seem to get Google Font in Site Title for the Focus Child Theme

[SavvyPro]

So I did the following :

Went to Google Fonts and copied the following string @import url(https://fonts.googleapis.com/css?family=Sigmar+One);

I went to Appearance > Editor in the WP Dashboard for my site and I pasted the following content to the very bottom of the Style.css page:

@import url(https://fonts.googleapis.com/css?family=Sigmar+One);
color: #244c5f;
font-family: 'Sigmar+One';
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
padding: 0;

I am new to customizing Genesis Child Themes.

Can someone please explain to me what I am doing wrong?

BTW, I am running my WP/Genesis site using MAMP on my Macbook.

Thank you

[Christoph]

Hi,

best practice is to enqueue Google fonts in functions.php.
You should also avoid adding code at the bottom of the style.css.

The code you added does not target any css class.
You have to specify the class you want to change.

I would add your changes to the existing class .site-title a around line 947 of the style.css:
.site-title a {
color: #244c5f;
font-family: 'Sigmar+One';
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
padding: 0;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[SavvyPro]

So I will add the following code at the bottom of the Focus functions.php file:

//* Enqueue Sigmar One Google Font
add_action( 'wp_enqueue_scripts', 'sp_load_google_fonts' );
function sp_load_google_fonts() {
wp_enqueue_style( 'google-font-sigmar+one', '//fonts.googleapis.com/css?family=Sigmar+One:300,700', array(), CHILD_THEME_VERSION );
}

Then I will add the CSS code you suggested above in the Style.css file:

.site-title a {
color: #244c5f;
font-family: 'Sigmar+One';
font-weight: 700;
line-height: 1.2;
margin: 0 0 16px;
padding: 0;
}

Is this correct?

I am assuming where it shows CHILD_THEME_VERSION, this should have the actual Focus child theme's version number.

Thanks

[SavvyPro]

I see the following in the Style.css file:

The following is from lines 939-945:
.site-title {
font-family: 'Economica', sans-serif;
font-size: 60px;
font-weight: 700;
line-height: 1;
margin: 0 0 8px;
}

The following is from lines 947-950:
.site-title a,
.site-title a:hover {
color: #244c5f;
}

I'm assuming I would add the CSS code you suggested in the first section from lines 939-945, correct?

Thanks

[Christoph]

Hi,

Focus pro already enqueues a Google font. Just add the new font to it.
(using a so called pipe | )

Yes, to the css changes.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[SavvyPro]

I see the following in the functions.php file for the Focus Pro theme:

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'focus_load_scripts' );
function focus_load_scripts() {

wp_enqueue_script( 'focus-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

wp_enqueue_style( 'dashicons' );

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Economica:700|Lora:400,400italic', array(), CHILD_THEME_VERSION );

}

Am I supposed to replace the bolded Economica with Sigmar+One, since I want to use the Sigmar One Google Font?

Then I will modify the style.css file to use the Sigmar One font as well, correct?

[SavvyPro]

Okay Chris, I see what you are saying.

I see the font I want now for my site title.

I did the following:

in the functions.php file I made the following changes (shown in bold):

wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=/Economica:700|Lora:400,400italic|Sigmar+One', array(), CHILD_THEME_VERSION );

In the style.css file I mad the following changes (shown in bold):

.site-title {
font-family: 'Sigmar One';
font-size: 60px;
font-weight: 700;
line-height: 1;
margin: 0 0 8px;
}

Now it's working great.

Thanks again for your help, Chris, it's much appreciated.

[Christoph]

You are welcome!
I´m glad it´s working.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Author]

Posts