Need Most Up to Date Tutorial for Font Change on NewsPro Theme

[Claire-ity]

I have spent lot of time trying to find the most up to date tutorial instructing me how to switch my current font to the Google Font called Lato https://fonts.google.com/specimen/Lato

It isn't clear to me what the most current and efficient way to do this is, and I've never once changed the font on my blog. I'm comfortable following instructions but prefer to feel confident I am using the most up to date tutorial.

Thanks in advance for help offered.

[Brad Dalton]

Try this tutorial

---

2700 Genesis Tutorials

[Claire-ity]

Thanks, that tutorial doesn't have a date on when it was published and when I followed the instructions the content didn't match Google Fonts interface options.

I don't need a super beginner's tutorial necessarily but I do need to feel confident that it is the most up to date method recommended by StudioPress users. Is there another option you might have bookmarked you could share with me, please?

Thanks for your time.

[Brad Dalton]

Using php is the most up to date method as seen in the Essence Pro child theme.

add_action( 'wp_enqueue_scripts', 'essence_enqueue_scripts_styles' );
function essence_enqueue_scripts_styles() {

	wp_enqueue_style(
		'essence-fonts',
		'//fonts.googleapis.com/css?family=Alegreya+Sans:400,400i,700|Lora:400,700',
		array(),
		CHILD_THEME_VERSION
	);
}

---

2700 Genesis Tutorials

[Andrea Rennick]

If you look in our official documentation, you will also see the most current methods.

https://my.studiopress.com/documentation/tutorials/design/how-to-load-google-fonts-in-a-genesis-website/

It doesn't matter what child theme you are using. The process is identical.

---

**forum signature**
If you need technical support for your theme please file a ticket.

The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

[Claire-ity]

Thanks for confirming the exact tutorial.
I followed it and something went very wrong.
Luckily I had a backup of the functions.php file because after inserting the code from the tutorial (I have screenshots of before insertion and after but there is no attachment function on this forum that I can see) and clicking 'update' the following error appeared:

"Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP."

After that all the code within the functions.php file disappeared (a blank page sat staring at me). I had to restore the previous version of the functions.php file to get the site to look normal again.

What did I do so wrong in my placement of the code that everything would disappear like that? Should I try again differently? That was scary! I'm not a coder and don't fancy in depth dabbling that can mess my site up, so any warnings for correcting my approach are much appreciated.

Thanks!

[Claire-ity]

[Claire-ity]

I will get a screenshot link....

[Claire-ity]

Will get a more private screeshot to display here, one moment.

[Claire-ity]

Before I entered code it looked like this:

https://drive.google.com/open?id=1Q4z4xD1siziF1BKx0FdGp7AqiMLNr7mD

[Claire-ity]

After I entered code it looked like this:

https://drive.google.com/file/d/1fF4d0h4U6KcxeSW5HF63bBsX8XpRaaaj/view?usp=sharing

[Brad Dalton]

Never add PHP code using the theme editor. Always use a code editor and FTP or File Manager in cPanel.

---

2700 Genesis Tutorials

[[email protected]]

You can also use Design Palette Pro, which requires no coding.

[Andrea Rennick]

From the code in the tutorial:

Leaving this line in causes a white screen - just like it says.

---

**forum signature**
If you need technical support for your theme please file a ticket.

The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

[Claire-ity]

Thanks everyone, I appreciate you all offering solutions.

*I never included the "<?php" part of the code from the tutorial. I did it just as instructed. I saw no warning anywhere about a white screen, nor that one should "Never add PHP code using the theme editor. Always use a code editor and FTP or File Manager in cPanel."

I'm gonna work on it some more until I wrangle this bugger.
I appreciate you all for the assistance.
: )

[Brad Dalton]

Once you load the fonts, then you need to use them in your CSS.

div {
    font-family: Lato;
}

Where div is the id or class selector.

---

2700 Genesis Tutorials

[Claire-ity]

Okay, so I successfully added the following code to my functions.php file by using the file manager in Cpanel:

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

NOW for the final task you said "You need to use them in your CSS.
div {
font-family: Lato;
}
Where div is the id or class selector."

Is this the CSS info tutorial link you advise I follow for this step: https://wpsites.net/wordpress-tips/free-google-web-fonts-for-wordpress/

I am assuming I only need this part, correct?
"3. Add Fonts To CSS"
Is this going to be pasted exactly as you have it shown in this thread?

Ideally I'd like to change the body font and possible the titles.

THANKS!

[Claire-ity]

Also, may I edit the CSS file from the WordPress dashboard or do I need to do it using the Cpanel File Manager again?

[Brad Dalton]

Now that you have loaded the fonts, you can use them with any selector. https://www.w3schools.com/css/css_syntax.asp

body {
    font-family: Lato;
}

Make sure you clear browser caching when adding/modifying CSS rules.

Look in your child themes style.css file to see how your default Google fonts are used.

---

2700 Genesis Tutorials

[Claire-ity]

Success!
Only thing I didn't figure out tonight is how to isolate the font of my SITE TITLE. I want it to pop more (bolder/thicker/or even different font type).
I didn't see that in the CSS style but maybe I missed it since I'm new at viewing such files.

Thanks so much!

[Author]

Posts