Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need Most Up to Date Tutorial for Font Change on NewsPro Theme
Tagged: google fonts
- This topic has 21 replies, 4 voices, and was last updated 5 years, 10 months ago by Claire-ity.
-
AuthorPosts
-
June 14, 2018 at 1:05 pm #220839Claire-ityParticipant
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.
June 14, 2018 at 8:30 pm #220848Brad DaltonParticipantJune 15, 2018 at 11:40 am #220866Claire-ityParticipantThanks, 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.
June 15, 2018 at 10:37 pm #220880Brad DaltonParticipantUsing 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 ); }
June 17, 2018 at 5:02 am #220902Andrea RennickMemberIf you look in our official documentation, you will also see the most current methods.
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.
June 17, 2018 at 9:04 pm #220920Claire-ityParticipantThanks 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!
June 17, 2018 at 9:12 pm #220921Claire-ityParticipantJune 17, 2018 at 9:13 pm #220922Claire-ityParticipantI will get a screenshot link....
June 17, 2018 at 9:15 pm #220923Claire-ityParticipantWill get a more private screeshot to display here, one moment.
June 17, 2018 at 9:23 pm #220926Claire-ityParticipantBefore I entered code it looked like this:
https://drive.google.com/open?id=1Q4z4xD1siziF1BKx0FdGp7AqiMLNr7mD
June 17, 2018 at 9:24 pm #220927Claire-ityParticipantAfter I entered code it looked like this:
https://drive.google.com/file/d/1fF4d0h4U6KcxeSW5HF63bBsX8XpRaaaj/view?usp=sharing
June 17, 2018 at 9:56 pm #220929Brad DaltonParticipantNever add PHP code using the theme editor. Always use a code editor and FTP or File Manager in cPanel.
June 17, 2018 at 10:27 pm #220930[email protected]MemberYou can also use Design Palette Pro, which requires no coding.
June 18, 2018 at 5:58 am #220941Andrea RennickMemberFrom 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.
June 18, 2018 at 9:24 pm #220973Claire-ityParticipantThanks 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.
: )June 18, 2018 at 9:36 pm #220974Brad DaltonParticipantOnce 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.
June 18, 2018 at 10:05 pm #220975Claire-ityParticipantOkay, 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!
June 18, 2018 at 10:18 pm #220979Claire-ityParticipantAlso, may I edit the CSS file from the WordPress dashboard or do I need to do it using the Cpanel File Manager again?
June 18, 2018 at 10:29 pm #220981Brad DaltonParticipantNow 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.
June 18, 2018 at 10:56 pm #220982Claire-ityParticipantSuccess!
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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.