Adding font with @font-face

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

Let us know how you get on

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: https://www.myfonts.com/fonts/tipos-pereira/giro/light/
 *
 * Webfont: Giro Outline by Tipos Pereira
 * URL: https://www.myfonts.com/fonts/tipos-pereira/giro/outline/
 *
 *
 * License: https://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: https://www.myfonts.com/fonts/tipos-pereira/giro/light/
 *
 * Webfont: Giro Outline by Tipos Pereira
 * URL: https://www.myfonts.com/fonts/tipos-pereira/giro/outline/
 *
 *
 * License: https://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 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

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?

https://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).

See these error messages:

Failed to load resource: the server responded with a status of 404 (Not Found) https://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) https://www.jabutitheatre.com/wp-content/themes/first-child-theme/webfonts/294467_0_0.ttf

@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

These files still cannot be found:

GET https://www.jabutitheatre.com/wp-content/themes/first-child-theme/web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.woff 404 (Not Found) VM174:535

GET https://www.jabutitheatre.com/wp-content/themes/first-child-theme/web/content/wp-content/themes/first-child-theme/webfonts/294467_0_0.ttf 404 (Not Found) VM174:551

Do you have the Google Chrome browser?

yes I have Chrome.

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

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