[Resolved] webfont usage in Puro Premium

This topic contains 16 replies, has 2 voices, and was last updated by  Andrew Misplon 3 months, 3 weeks ago.

  • Author
    Posts
  • #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

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

    shreddie
    Participant

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

    Bruce

    #10168

    Andrew Misplon
    Keymaster

    Super glad to hear that did the trick 🙂

    #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!

    • This reply was modified 3 months, 3 weeks ago by  shreddie. Reason: more info added
    #10192

    Andrew Misplon
    Keymaster

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

    #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.

    #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.

    #10196

    shreddie
    Participant

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

    Thanks!

    #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… 🙂

    #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() . '/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 );
    #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.

    #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.

    #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.

    #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.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Scroll to top