Adding font with @font-face

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

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

@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

yes I have Chrome.

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