Support » Theme: Quark » Using webfonts via fontsquirrel

  • Resolved hilldw11


    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 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: It is really rough right now and a big work in progress)

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator stephencottontail


    Your site is looking for the newly added stylesheet at but your stylesheet is actually at 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.

    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?

    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");

    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!

    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.

    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:

    This is the code you will need:

    Theme Name: Quark Child
    Theme URI:
    Author: Anthony Hortin
    Author URI:
    Description: Quark child theme
    License: GNU General Public License v2 or later
    License URI:
    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
    -------------------------------------------------------------- */

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Using webfonts via fontsquirrel’ is closed to new replies.