webfont usage in Puro Premium

This topic has 16 replies, 2 voices, and was last updated 5 years, 8 months ago by Andrew Misplon.

Tagged: Child Theme webfont

Author
Posts
July 25, 2018 at 5:55 pm #10163
shreddie
Participant
Hi Andrew,
I want to add a webfont to use for the Site Title and Tagline, but cannot get it working. I put all of the webfont files, and .css with the @font-face declaration into the wp-admin/css directory, and linked to the stylesheet in the Home page HTML. I added this css to the Addition CSS in Puro Premium:
```
h1, h2 .site-title .site-description {
	font-family: 'CopperplateGothicStd33BC';
}
```
I followed the instructions carefully from font squirrel to generate my font kit and install it. But, it’s not rendering using the font.
the site is https://bowmanrestorations.com
thanks!
Bruce
July 25, 2018 at 6:00 pm #10165
Andrew Misplon
Keymaster
Almost there. The theme’s rule for the title is just a bit more specific. Try:
```
h1, h2, .site-header .site-branding h1.site-title, .site-header .site-branding h2.site-description {
	font-family: 'CopperplateGothicStd33BC';
}
```
July 25, 2018 at 6:25 pm #10167

shreddie
Participant
That worked perfectly – thanks!! As always, I really appreciate your terrific support.
Bruce
July 25, 2018 at 6:28 pm #10168

Andrew Misplon
Keymaster
Super glad to hear that did the trick 🙂
July 30, 2018 at 4:37 pm #10187

shreddie
Participant
Hi Andrew,
I added the link to the stylesheet containing the @fontface declaration to the HTML for each page, which was good for testing, but now I want to do it correctly.
I tried adding the @fontface declaration to the Customizing>Additional CSS but that didn’t work.
What’s the best way to add this:
<link rel="stylesheet" href="copperplatewebfont.css" type="text/css" charset="utf-8" />
So that it is used by all of the pages in my site, and survives theme updates?
Thanks!
July 30, 2018 at 6:31 pm #10192

Andrew Misplon
Keymaster
For sure, we can definitely get this update ready. Are you using a child theme? It’s ok if not.
July 30, 2018 at 7:01 pm #10193

shreddie
Participant
No, I am not using a Child theme. I experimented with the Childify Me plugin, but once I created the child theme, it used the default puro look, and did not have all of my appearance customizations, so I switched back to my Puro Premium theme.
July 30, 2018 at 7:04 pm #10194

Andrew Misplon
Keymaster
That’s an expected result when switching to a child theme late in development. Here is my blog post on how to deal with that: https://purothemes.com/customizer-settings-export-import/.
I’ll find a solution tomorrow using Code Snippets plugin 🙂 Chat then.
July 31, 2018 at 12:24 pm #10196

shreddie
Participant
I used the Customizer Export/Import and now have a Child Theme with my settings, ready for the next step.
Thanks!
July 31, 2018 at 2:16 pm #10200

shreddie
Participant
I also have the Code Snippets plugin installed and ready to use. Just not sure what php code to use in there… 🙂
July 31, 2018 at 4:21 pm #10202
Andrew Misplon
Keymaster
Sorry for the delay. Code Snippets isn’t necessary if you have a child theme. Edit your child theme functions.php file where you should find a function that looks something like this:
```
function puro_child_enqueue_parent_style() {
	wp_enqueue_style( 'puro-parent-style', get_template_directory_uri() . '//puro-4401.kxcdn.com/style.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_enqueue_parent_style', 8 );
```
Add to that function an enqueue for your new stylesheet, the final result would be:
```
function puro_child_enqueue_parent_style() {
	wp_enqueue_style( 'puro-parent-style', get_template_directory_uri() . '//puro-4401.kxcdn.com/style.css' );
	wp_enqueue_style( 'web-font', get_stylesheet_directory_uri() . '//puro-4401.kxcdn.com/copperplatewebfont.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_enqueue_parent_style', 8 );
```
The line you are adding is:
wp_enqueue_style( 'web-font', get_stylesheet_directory_uri() . '//puro-4401.kxcdn.com/copperplatewebfont.css' );
This assumes you’ve inserted copperplatewebfont.css into the child theme. If you want to just add a new function to the child theme functions.php file, you could add something like:
```
/**
 * Enqueue custom styles.
 */
function puro_child_enqueue_custom_styles() {
	wp_enqueue_style( 'web-font', get_stylesheet_directory_uri() . '//puro-4401.kxcdn.com/copperplatewebfont.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_enqueue_custom_styles', 8 );
```
July 31, 2018 at 4:54 pm #10203

shreddie
Participant
Hi Andrew,
This is the first time I’ve done anything with a child theme. I’m not sure that I follow. my ‘puro child’ directory has only a functions.php file and a style.css file. The .php file is empty.
I used the Childify Me plugin to create my child theme, so maybe it didn’t do it the way you expected?
Sorry, but I think I need a bit more handholding for this part.
July 31, 2018 at 5:16 pm #10206

Andrew Misplon
Keymaster
No problem. Rather use this child theme here: https://purothemes.com/documentation/puro-theme/child-theme-library/#heading-starter. Download the ZIP, switch to the parent theme, delete your current child theme, install the ZIP from Themes > Add New > Upload Theme. Everything should then make sense.
July 31, 2018 at 10:50 pm #10207

shreddie
Participant
Hi Andrew,
I did download the zip. I then switched to the parent theme, deleted my current child theme, installed the new ZIP from Themes > Add New > Upload Theme. But now I’m not sure what to do next. Sorry, I am a novice at php.
Also, you said, this assumes you’ve inserted copperplatewebfont.css into the child theme. But I’m not sure how to do that.
August 1, 2018 at 8:57 am #10208

Andrew Misplon
Keymaster
Sure. You can either edit your child theme files via FTP, download them to your desktop and then use an editor like Sublime to change them and then upload them back to the server OR you can edit them via Appearance > Editor.
To copy copperplatewebfont.css to your child theme you have to use your hosting File Manager or a FTP client like FileZilla or FTP Duck. The child theme is located at /wp-content/themes/puro-child/.
Once at Appearance > Editor, edit functions.php and then head back to my instructions for how to proceed: https://purothemes.com/support/topic/webfont-usage-in-puro-premium/#post-10202.
Author
Posts