Fonts

Now the last thing I want to do in this lesson on using Custom Fonts in Thesis 2 Skins is to replace the home button here with an icon. We’re going to continue working with Font Awesome icons and I’m sure you can guess it’s really easy based on what we’ve done so far. Let’s

So that’ s how to use FontAwesome icons as social media icons. Now what I’m going to do is create a social media box here using FontAwesome. I’m going to do it in those text boxes. Let’s go to pages, and to my Sandbox and I’m going to create some links. I’m going to say,

So the next font related item we’re going to talk about using on a Thesis 2 website is FontAwesome. FontAwesome is essentially a set of icon fonts. I don’t actually remember how many there are. It’s something like 400 different icons that you can use for various things. In this case, we’re going to use

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. I have picked the font I want and purchased it

The next thing we’re going to take a look at is using TypeKit fonts with Thesis 2. Now, TypeKit does come with the Adobe Creative cloud subscription but you don’t need a subscription in order to purchase or use it. You can purchase fonts in Adobe TypeKit without having a subscription. That’s what we’re going

You’ve just seen how to add Google fonts to a Thesis 2 Skin and now we’re going to do it in Adobe Edge Fonts. It’s pretty easy to do or very similar in Adobe Edge Fonts. Let’s go to Adobe Edge. I actually think that Adobe Edge fonts are free and you don’t have to

The first hosted font we’re going to look at for this lesson on Customizing Thesis 2 Skins with Custom Fonts is Google.Let’s come back over to the custom CSS. And for the site title, instead of font-family: ‘Aleo’, serif we’ll just say font-family: ‘Permanent Marker’, cursive and save it. Come back over and refresh it

You’ve had an introduction to using Web Fonts for Thesis 2 Skins and now we’re going to start talking about self-hosting fonts. After this we’ll go through how to add specific hosted fonts. What we’re going to do is come over to the site fontsquirrel.com which is a place where you can download free fonts.

Now that we have talked about all the introductory information about font and text properties and using them in Thesis 2, the next thing we’re going to do is talk about web fonts. We’re going to start off essentially with an introduction to web fonts. Remember at the beginning we talked about web-safe fonts? Those

The next thing we’re going to talk about in this Using Custom Fonts in Thesis Skins lesson is the text shadow property in CSS3. The text shadow property is pretty cool and it gets used a lot in Genesis. I use it in the menu in my Carta Skin for Thesis 2 a little bit.

Now that we’ve talked about what text properties are available and how they work, we’re going to move on to talk about how to use those text-properties for positioning elements on a page because they can be used very effectively for that. Something that people are always asking me is how to center a menu

So that was my introduction to font properties for Thesis 2 websites and the next thing we’re going to talk about is css2 text properties. Text properties may seem a little arbitrary, that is the distinction between font and text properties. For example, color could just as easily be for a font as text, as

So that was my introduction to fonts and font stacks for use in Thesis 2 websites. This background information becomes useful in the context of understanding CSS font properties. Let’s go back again to CSS fonts in w3schools.com. Fonts have a number of potential properties. The first property is font family and that’s where the

Good morning everybody and welcome to lesson 2 of Customize Thesis 2.1 Like a Pro. In this lesson we’re going to talk about how to customize Thesis Skins using custom fonts. The first part of the seminar is going to be relatively basic in that I’m going to introduce new folks to basic font CSS.

Thesis 2.1 makes it very easy for web designers to incorporate custom fonts in their designs. In this lesson we will look at the various CSS rules that govern the appearance of fonts and then discuss methods of using custom web fonts. There are several ways to insert custom web fonts into your design. You

In this session we demonstrate how to use Adobe Edge Fonts with Thesis 2.1 and show where to place the scripts and the font family. We have prepared a seminar for this in Customize Thesis Like a Pro lesson number 2 where we go through the process of adding adobe fonts and talk about the

In this session we show how to install and use cufon fonts in Thesis 2. Cufon fonts are a way to have our own self-hosted fonts that are used on the site and that are unique and different. We discuss issues with some Google web fonts that are pixelated around the edges which we do

In this session we demonstrate how to use Google fonts with Thesis 2.0. We show how to choose the font family and how to paste the code into the skin editor. In the meantime, what I’m going to do is demonstrate how to use a custom font. Jim, yes I am off on Wednesday. And