Build Your Own Business Website header image

How to Add Custom Fonts to Custom Thesis 2.1 Skins

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

In this session we show how to use the Thesis Font API to add a Google Font to the skin so that it shows up in the typical font drop down lists.

Video Transcript

Member: I have another question.

Rick: Uhuh.

Member: So I want to use font kit from adobe and,

Rick: And which font? Typekit you mean or Edge?

Member: I’m sorry Typekit not Edge.

Rick: Okay.

Member: So, I was able to do that by adding some code in custom.php I just asked somebody at the thesis forum and I just cut and pasted their code that they recommend that would add the fonts I want to the dropdown menu inside the Thesis design…

Rick: Except that Typekit doesn’t work that way.

Member: Oh.

Rick: In Typekit what you have to do is specify what you want to use that font in the kit itself.

Member: Right.

Rick: Right so you open up the Typekit and you say these are the selectors I want to use that font. And when you do that it’s not going to help you put the font in the dropdown because Typekit will ignore that.

Member: Right, so I did both I defined the inside in the Typekit side and then also I added this i think they called it filter or something like that into the custom.php.

Rick: Well, since that you’re working on your own skin you never want to put anything in your custom.php.

Member: Oh.

Rick: Because custom.php is for your end user to use it’s not for you as the developer. You as the developer should place all of your code inside of skin.php and if you wished to add a font to the list of fonts in your skin…

Member: Uhuh.

Rick: Then again what you do is come back over to this, where are we. Come back over to the Thesis Skin API, actually we are going to go to the Fonts API okay back over here. Come down to the Fonts API and then use this function. So, okay we’ll in fact we are going to use let’s come over here right. I forgot there is a method in the Skin API; the Fonts API. Okay, so if you got the fonts method you could simply do this again inside skin.php you have this protected function fonts, return array and then you’re going to well this is the version of Adelle.

class byob_barking_chihuahua extends thesis_skin {
public function meta_viewport() {
return “initial-scale=1, width=device-width”;
}
protected function fonts() {
return array(
‘adelle” => array(
‘name” => ‘Adelle’,
‘family’ => ‘Adelle, serif’));
}
}

But let’s use something else, let’s see actually let’s just go through the exercise of adding a Droid Sans to the skin. So, go over to Google API on our Droid Sans; okay, and let’s take both of them. We’ll take the normal and the bold and we could do it as simply as using the @import url inside of the skin css or we could well let’s do the least code ways I guess. Let’s do it the least code way so we’re going to come over here at @import and we’ll copy this @import statement.

           @import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

And I’m going to come over to the skin editor for the skin and go to the skin css and at the very top of the file I’m going to add that @import statement. Okay, now I’m importing the font using my custom css file and then in order for this to actually be used or to actually show up in the font dropdown list then I come back over to this fonts and now I’m going to call this Droid Sans. Let’s see how Google wants this to refer to it, so it says; okay that’s the barking chihuahua for you. So then we have this font-family here and we’re going to copy the reference to the font family and come back over to the…so the family here is going to be this…oops, we’re going to have to put this in double quotes. okay, so Droid Sans, san-serif and then the name will be Droid Sans,

           class byob_barking_chihuahua extends thesis_skin {
public function meta_viewport() {
return “initial-scale=1, width=device-width”;
}
protected function fonts() {
return array(
‘droid_sans” => array(
‘name” => ‘Droid Sans’,
‘family’ => ‘”Droid Sans”, san-serif’));
}
}

And that’s all we have to do. So, then we save this and we upload it and then; okay so we uploaded that and now if we come over to our Design Options oh actually I don’t have Design Options here do I? And neither do you because you’re not going to have,

Member: I don’t but it’s a dropdown menu like a; when I was creating packages. I can’t choose…

Rick: Oh, sure you’re right it will show up in a package. So let’s go back to the skin editor and go to css and say create a post formatting package and Font Settings. Now, Droid Sans is down here at the bottom for you to choose from.

Member: Uhuh.

Rick: So, that’s how you add a font to the dropdown list like that. It’s really a two-part system you know one part of it is creating a php that adds it and that also helps write the css and that’s this protected function fonts and then the second part of it is using the @import statement to bring the font definition into the webpage.

Member: So, I added the font definition in the Typekit in the header?

Rick: Yes, right. In the head scripts.

Member: Head scripts right. So, add the box like a purple box so that’s how I did it will that work the same way?

Rick: No, because Typekit doesn’t use the @import url method. Typekit is a javascript replacement so in the instance of the Typekit what you’re doing is placing the javascript call in the head scripts.

Member: Right.

Rick: Now, that’s not going to follow your skin anywhere.

Member: Right.

Rick: Alright, the head scripts are not part of your skin they are part of your site. If you change skins the head scripts will still be the same and if you export the skin the head scripts aren’t going to go with it. So, that’s not a skin; the only way for you to make these fonts attached to the skin is to do what I just showed you.

Member: Okay.

Rick: Is to use this @import url system and well it’s not the only way. You could use php to insert this call as well but in your situation I don’t think it’s just as easy to do it this way.

Member: Right, easier and better for me. So, how do I do the Typekit provide the @import url to?

Rick: It does not and there’s no way for you to make Typekit portable.

Member: Oh.

Rick: Because Typekit is tied to your domain.

Member: Ah.

Rick: Right, you set up a kit that’s tied to your domain and it’s never going to be portable. If you need a portable font you have to use something else besides Typekit. Whether it’s you know Adobe Edge Fonts those are portable or you know you can, My Fonts are not portable but if you can self host fonts that you can create using the @font face generator then those are portable but Adobe Typekit is never going to be portable.

0 Comments… add one

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

Leave a Comment