WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Using webfonts via fontsquirrel (7 posts)

  1. hilldw11
    Member
    Posted 5 months ago #

    I am attempting to change the heading font from Arvo to another font via @font-face. I received permission from the author to use the font. I uploaded the font to the webfont generator on fontsquirrel.com and downloaded and then extracted the files from the zip folder. I uploaded the .eot, .svg, .ttf, .woff files to .../themes/quark/fonts. The kit also contains a stylesheet.css file which I uploaded to the ...themes/quark folder that contains the other css and php files. The stylesheet has the following code:

    @font-face {
        font-family: 'always__forever';
        src: url('always_forever-webfont.eot');
        src: url('always_forever-webfont.eot?#iefix') format('embedded-opentype'),
             url('always_forever-webfont.woff') format('woff'),
             url('always_forever-webfont.ttf') format('truetype'),
             url('always_forever-webfont.svg#always__foreverregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    The directions then say to place:
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
    in my html. It doesn't specify where in the html, I figured in the <head> </head> tags(?). I placed it in the header.php file in between <head> </head>.

    Then I added the following code to my child theme:

    h1, h2, h3, h4, h5, h6 {
    	font-family: 'always__forever', Arial, serif;
    	font-style: normal;
    	font-weight: 400;
    	color: #333;
    	margin-top: 0;
    }

    Of course this isn't working and I have spent the last two days reading about webfonts and I still can't figure out what I am doing wrong.
    The code I placed in my child theme does cause the headings to go to arial so, I know that is working.

    I'd appreciate any help, thank you.

    (Here is the site I am working on: liftmeupbabywearing.org It is really rough right now and a big work in progress)

  2. stephencottontail
    Member
    Posted 5 months ago #

    Your site is looking for the newly added stylesheet at http://www.liftmeupbabywearing.org/stylesheet.css but your stylesheet is actually at http://www.liftmeupbabywearing.org/wp-content/themes/quark/stylesheet.css. So all you need to do is replace your <link> tag with <link rel="stylesheet" href="wp-content/themes/quark/stylesheet.css type="text/css" charset="utf-8" />` and you should be good to go.

  3. hilldw11
    Member
    Posted 5 months ago #

    Thanks for the quick response.

    I made the adjustment you suggested but no luck. Does the url for the fonts in the stylesheet need to be be changed?

  4. batharoy
    Member
    Posted 5 months ago #

    See if this will work.
    Put the included stylesheet in the fonts folder, then call it in your child css. You then shouldn't need to add to the header.php.

    @import url("../quark/fonts/stylesheet.css");

  5. hilldw11
    Member
    Posted 5 months ago #

    I believe through Jetpack there is an edit CSS feature under Apperance and that is what I figured was my child css and where I placed this:

    h1, h2, h3, h4, h5, h6 {
    	font-family: 'always__forever', Arial, serif;
    	font-style: normal;
    	font-weight: 400;
    	color: #333;
    	margin-top: 0;
    }

    I meant child css in my op and not child theme**

    Where would i put:

    @import url("../quark/fonts/stylesheet.css"); ??

    Thanks for trying to help me out!

  6. batharoy
    Member
    Posted 5 months ago #

    Sorry I assumed it was a full blown child them since you added to the header.php.
    Just so you know any php. files you edit will be overwritten if the theme is updated, that's why we always suggest a child theme for those types of edits.
    Either way it looks like you need one now, I don't think my method would work without one.

  7. hilldw11
    Member
    Posted 5 months ago #

    Creating the child theme and posting the code you suggested worked. Thanks to everyone for your help.

    Now I have a mountain of other adjustments to make.

    To any Quark theme users trying to do what I did...

    Follow the instructions here: https://codex.wordpress.org/Child_Themes

    This is the code you will need:

    /*
    Theme Name: Quark Child
    Theme URI: http://quarktheme.com
    Author: Anthony Hortin
    Author URI: http://maddisondesigns.com/
    Description: Quark child theme
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, gray, dark, light, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
    Text Domain: quark-child
    Template: quark
    */
    @import url("../quark/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

Reply

You must log in to post.

About this Theme

About this Topic