Host The Font Yourself
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.
Add CSS to Make the Font Work
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.
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
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.