Using webfonts via fontsquirrel

  • Resolved hilldw11

    (@hilldw11)


    11 years 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)

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

    (@stephencottontail)

    Your site is looking for the newly added stylesheet at https://www.liftmeupbabywearing.org/stylesheet.css but your stylesheet is actually at https://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.

    Thread Starter hilldw11

    (@hilldw11)

    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?

    batharoy

    (@batharoy)

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

    Thread Starter hilldw11

    (@hilldw11)

    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!

    batharoy

    (@batharoy)

    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.

    Thread Starter hilldw11

    (@hilldw11)

    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.www.ads-software.com/Child_Themes

    This is the code you will need:

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

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