Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 11 – Using Fonts from MyFonts.com with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Host The Font Yourself

Adding fonts from myfonts.com is different than what we have just been looking at with Google Fonts and Adobe fonts. Myfonts.com is a place where you can buy fonts but you still host them yourself and it uses some javascript in order to load it.

Purchase the Font Based on Page Views

I have picked the font I want and purchased it font for $24.50. This license enables 10,000 views per month. I can use it on any site I want but it’s only going to work for 10,000 views a month. If you need to increase the number of views, you can click on this thing and look at buying choices

For example, Webfont. If you add it to the cart it’s $6.60. Update the quantity and let’s say I need it for 50,000 page views. In that case it’ll be $13.20. So that’s the deal, you buy a license in this case for the number of page views. So that’s the way this thing works.

Options in Configuring the Kit

I’m going to come back over to my “Order History and Downloads” because I’ve got this one here. What I can do once I’ve made the purchase, I can configure this kit by giving it a custom name. I don’t really need to give it a custom name. I can choose to include the SVG, I can do this Data URI encoding which I’m not going to do.

In terms of hinting for browsers, I can choose the best, smooth, native or none. For line height adjustments, you just can use the best method but if you know what you’re doing, you can play around with this. The browser code, I’m just going to use CSS.

Upload Files to Your Website

I can download this kit now and show in a folder. I’ve got this kit, MyFontsWebFontsKit and what I’d do now is upload these files to my website.

I’ve already downloaded this once, MyFontsWebFontsKit and what I want to do then is take MyFontsWebFontsKit.js and the web fonts folder and put them into my website. I’m going to copy those, come over to the site, thesis, skins and classic-r.

Once I’ve got this fonts directory here and here, I’m just going to delete that now. I’m going to paste this here and so the webfonts are all in that, my MyFontsWebFontsKit is there so I just have to upload that now, classic-r, upload the javascript and upload webfonts.

Add CSS to Make the Font Work

Now that’s not all I have to do, that was just getting it to the site. I was getting my webfonts and my javascripts loaded on the site but then the other thing I have to do is add some css. I’m going to do that first.

Let’s go back to Downloads and look in MyFontsWebFontsKit. I’m just going to StartHere.html. What I need to do now is add this script, all it this is telling us is where the MyFontsWebFontsKit is. I need to take that and put it in the head of Thesis. HTML Head Editor, Head Scripts, paste it there, save that, and then my font-family would look like this body font-family Ganache.

I can also put serif after that. So if we come back over to the Custom Css, come down to site title, say font-family: Ganache, cursive, serif. TypeKit which we were just using may overwhelm this so I may have to disable TypeKit. Yeah, it does. So what I’m going to do is just get rid of it out of the head here.

Let’s try that one more time. It’s not the correct font style yet, so what did I do wrong here? Head Scripts, type=”text-javascript”… Actually, I get it. We could use an absolute url for that but I don’t want to use an absolute url so I’m going to come up over here and grab this script also. There are two pieces of script here, so HTML Head, Head Scripts, set where your webfonts are, src=”http://www.thesis2demo.com/wp-content/thesis/skins/classic-r/MyFontsWebFontsKit.js”.

I guess it’s just as easy as that. And I think I’m going to pull out //to place your webfonts in a custom directory, //uncomment this and set to where your webfonts are. I’m going to comment that back, script, script type=”text/javascript”.

I’m just going to make sure that src=”http://www.thesis2demo.com/wp-content/thesis/skins/classic-r/MyFontsWebFontsKit.js” actually shows up. It does. Okay, save it. That was it.

So, the moral of the story here is, I’m pretty sure that this would fail without the license. They want you to put the license in and then you do need to put the actual url of where MyFontsWebFontsKit.js is in the src.

You don’t need to have a custom path in the webfonts as long as you don’t change the name of that webfonts folder and as long as that webfonts folder is in the same directory where MyFontsWebFontsKit.js is.

Recap of the Process

So these two things here are intended to locate the webfonts directory and then this MyFontsWebFontsKit.js. Essentially, what happens is when you open up your StartHere.html, you want to just copy this whole thing in instead of just a script and then you want to make sure that you’ve changed this src to the actual location of this javascript file. Once you’ve done that then this works fine.

Angelique asked, “Just to make sure, you added licensing lines to the Head Script and then changed the src address to indicate the folder you moved it to?” Yes, that’s correct. The right way to handle this is to copy all of the licensing code because it does include your build id. Anyway, copy all of the licensing code and make sure the src has the right information.

Yes, Angelique just paste it exactly as it sits there, from start to finish. That was really the big mistake I made here, was not just copying the whole thing, pasting it up from start to finish and then setting this src value.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one