WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Adding font with @font-face (11 posts)

  1. lf designs
    Member
    Posted 8 months ago #

    Hello all,

    I'm new to this but here goes. I'm trying to add a font using @font-face. The font in question (Giro) has been downloaded as a Webfont Kit, with instructions for people like me, and yet..

    They ask me to
    "Include a reference to the Kit. Locate the CSS file in the Kit’s main folder. You should place a reference to this file in the head section of your website’s HTML code. Make sure that the reference appears on all HTML pages of your site.
    This will link the webfonts from the Kit to your website. If you uploaded the Kit to the root folder of your site, then you can just copy and paste the code below into your site's head. If you uploaded the Kit to a subfolder, you’ll need to adjust the path to the font files in the CSS file."

    Where is this HTML code? Should I copy it straight into the child-theme stylesheet.css? Are they talking about something else? I'm pretty confident I know what I have to paste and why, but I really don't know where to paste it into.

    Help much appreciated,

    thank you.

  2. rdellconsulting
    Member
    Posted 8 months ago #

    This Snippet adds Google Fonts. I'd guess it can be adapted to your need.

    Let us know how you get on

  3. lf designs
    Member
    Posted 8 months ago #

    As I've understood what they're asking me to do is slightly different.

    This is what they want "in the head section of [my] website's HTML code":

    [ Moderator note: please wrap code in backticks or use the code button. ]

    <!--
    /**
     * @license
     * MyFonts Webfont Build ID 2704487, 2013-12-09T11:07:20-0500
     *
     * The fonts listed in this notice are subject to the End User License
     * Agreement(s) entered into by the website owner. All other parties are
     * explicitly restricted from using the Licensed Webfonts(s).
     *
     * You may obtain a valid license at the URLs below.
     *
     * Webfont: Giro Light by Tipos Pereira
     * URL: http://www.myfonts.com/fonts/tipos-pereira/giro/light/
     *
     * Webfont: Giro Outline by Tipos Pereira
     * URL: http://www.myfonts.com/fonts/tipos-pereira/giro/outline/
     *
     *
     * License: http://www.myfonts.com/viewlicense?type=web&buildid=2704487
     * Licensed pageviews: Unlimited
     * Webfonts copyright: This work is dedicated to the Public Domain
     *
     * © 2013 MyFonts Inc
    */
    
    -->
    <link rel="stylesheet" type="text/css" href="MyFontsWebfontsKit.css">
    
    And this links to the "MyFontsWebfontsKit.css" file I've placed in the root directory, as they asked me.
    (But where should I paste this?!)
    
    The "MyFontsWebfontsKit.css" contains the following:
    
    /**
     * @license
     * MyFonts Webfont Build ID 2704487, 2013-12-09T11:07:20-0500
     *
     * The fonts listed in this notice are subject to the End User License
     * Agreement(s) entered into by the website owner. All other parties are
     * explicitly restricted from using the Licensed Webfonts(s).
     *
     * You may obtain a valid license at the URLs below.
     *
     * Webfont: Giro Light by Tipos Pereira
     * URL: http://www.myfonts.com/fonts/tipos-pereira/giro/light/
     *
     * Webfont: Giro Outline by Tipos Pereira
     * URL: http://www.myfonts.com/fonts/tipos-pereira/giro/outline/
     *
     *
     * License: http://www.myfonts.com/viewlicense?type=web&buildid=2704487
     * Licensed pageviews: Unlimited
     * Webfonts copyright: This work is dedicated to the Public Domain
     *
     * © 2013 MyFonts Inc
    */
    
    @font-face {font-family: 'Giro-Light';src: url('webfonts/294467_0_0.eot');src: url('webfonts/294467_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/294467_0_0.woff') format('woff'),url('webfonts/294467_0_0.ttf') format('truetype');}
    
    @font-face {font-family: 'Giro-Outline';src: url('webfonts/294467_1_0.eot');src: url('webfonts/294467_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/294467_1_0.woff') format('woff'),url('webfonts/294467_1_0.ttf') format('truetype');}

    So, if I'm not too off track, the first code will redirect (something) to this css file which will in turn indicate where these fonts are so they can be used in the website.
    Then they tell me I can assign the webfont (font-family) to tags, classes, etc. And I should do this by editing my css wherever I should need it.

    So, if I'm using a child-theme (generated with the plugin) and I only have the style.css, should I make a copy of all the other files from the parent theme and have them in my child version so I can edit them? And if I'm editing the style.css, should I write above or below this line: @import url("../customizr/style.css"); or should I delete it and copy the whole parent theme style.css and then edit that?

    As you can see, I'm lost because it's all pretty confusing for me. Sorry for all the questions. If it's too much, just let me know and I'll just leave it.

    thanks

    daniel

  4. lf designs
    Member
    Posted 8 months ago #

    I apologise for the lack of backticks.

    I'm actually rethinking this as it seems to be slightly out of my reach.

    Thanks for your time anyway.

    daniel

  5. lf designs
    Member
    Posted 8 months ago #

    I had one last try at it and I thought it worked fine until I looked at it from another computer and I saw the type was different.

    Could someone have a quick look and point out where/what the problem might be?

    http://www.jabutitheatre.com/

    Thanks.

    ps: it's in-progress and the body background image is one I wanted for a specific page (see Project>My City), but can't find any solution for it being applied to the whole site. (sorry for this extra issue, will open new thread if necessary).

  6. Andrew
    Forum Moderator
    Posted 8 months ago #

    See these error messages:

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.jabutitheatre.com/wp-content/themes/first-child-theme/webfonts/294467_0_0.woff

    Failed to load resource: the server responded with a status of 404 (Not Found) http://www.jabutitheatre.com/wp-content/themes/first-child-theme/webfonts/294467_0_0.ttf

  7. lf designs
    Member
    Posted 8 months ago #

    @Andrew Nevins. Thanks, I had a look at the path and relocated the files and readjusted the code to this path, as so:

    @font-face {font-family: 'Giro-Light';src: url('web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.eot');src: url('web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.eot?#iefix') format('embedded-opentype'),url('web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.woff') format('woff'),url('web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.ttf') format('truetype');}
    
    /* Adjust Menu (black) text color, (Giro-Light) font-family, (1.5em) font-size  */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a {
    display:        inline;
    color:          #707070;
    font-family:    Giro-Light;
    font-size:      1.5em;
    font-weight: 	normal;
    font-style: 	normal
    padding:        5px 20px;
    }

    It's still not working, but I don't have a clue why... maybe you can spot something amiss.

    Another issue is how to troubleshoot these things from my own computer as if I were on another (I'm using my partner's for these checks and she's losing her patience).

    Thanks a lot.

    daniel

  8. Andrew
    Forum Moderator
    Posted 8 months ago #

  9. lf designs
    Member
    Posted 8 months ago #

    yes I have Chrome.

  10. Andrew
    Forum Moderator
    Posted 8 months ago #

    Open your website in Chrome.
    Right click anywhere on the page and select "Inspect element".

    A new toolbar should appear at the bottom of your screen.
    Along the top of the toolbar should be a "Console" tab. Press that.

    This section will throw errors if files are being called that cannot be found or accessed, and general JavaSript errors and warnings.

    https://developers.google.com/chrome-developer-tools/docs/console

  11. lf designs
    Member
    Posted 8 months ago #

    Thank you so much! It actually really helped me understand how I had to write the path in the WP Editor and I managed to get it working!

    Thanks!

    p.s: I added a new thread for the issue I'm having with the background image.. maybe you could have a look some time? no rush!

    Thank you very very much

    daniel

Reply

You must log in to post.

About this Theme

About this Topic