webfont usage in Puro Premium

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';
}

That worked perfectly – thanks!! As always, I really appreciate your terrific support.

Bruce

Super glad to hear that did the trick 🙂

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!

For sure, we can definitely get this update ready. Are you using a child theme? It’s ok if not.

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.

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.

I used the Customizer Export/Import and now have a Child Theme with my settings, ready for the next step.

Thanks!

I also have the Code Snippets plugin installed and ready to use. Just not sure what php code to use in there… 🙂

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() . '/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() . '/style.css' );
	wp_enqueue_style( 'web-font', get_stylesheet_directory_uri() . '/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() . '/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() . '/copperplatewebfont.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_enqueue_custom_styles', 8 );

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.

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.

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.

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.

OK, thanks for the extra instruction.

I added my copperplatewebfont.css file to the /wp-content/themes/puro-child/ directory.

and then edited the functions.php, adding:

/**
 * Enqueue custom styles.
 */
function puro_child_enqueue_custom_styles() {
	wp_enqueue_style( 'web-font', get_stylesheet_directory_uri() . '/copperplatewebfont.css' );
}
add_action( 'wp_enqueue_scripts', 'puro_child_enqueue_custom_styles', 8 );

But it was not working – the font was not loading.

I Inspected the element, and my console had these errors:

copperplatewebfont.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
copperplategothicstd-33bc-webfont.woff:1 Failed to load resource: the server responded with a status of 404 (Not Found)
copperplategothicstd-33bc-webfont.ttf:1 Failed to load resource: the server responded with a status of 404 (Not Found)
copperplatewebfont.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

I installed the font files into the /wp-content/themes/puro-child/ directory, and it is now working!

Thanks for all of your help!!