- This topic has 16 replies, 2 voices, and was last updated 6 years, 2 months ago by Andrew Misplon.
Tagged: Child Theme webfont
- AuthorPosts
- July 25, 2018 at 5:55 pm #10163
shreddieParticipantHi 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!
BruceJuly 25, 2018 at 6:00 pm #10165
Andrew MisplonKeymasterAlmost 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
shreddieParticipantThat worked perfectly – thanks!! As always, I really appreciate your terrific support.
Bruce
July 25, 2018 at 6:28 pm #10168
Andrew MisplonKeymasterSuper glad to hear that did the trick 🙂
July 30, 2018 at 4:37 pm #10187
shreddieParticipantHi 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 MisplonKeymasterFor 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
shreddieParticipantNo, 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 MisplonKeymasterThat’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
shreddieParticipantI 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
shreddieParticipantI 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 MisplonKeymasterSorry 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
shreddieParticipantHi 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 MisplonKeymasterNo 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
shreddieParticipantHi 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 MisplonKeymasterSure. 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.
- AuthorPosts
You must be logged in to reply to this topic.