Build Your Own Business Website header image

Fonts

How Adobe TypeKit Fonts Work

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we discuss how Adobe TypeKit fonts work. And we talk about how browsers use fonts to display text and rely on fonts that are resident on the computer. We also talk about web safe fonts which are the ones that a web designer can expect that every computer is going to have

Part 13 – Create Social Media Links with Font Awesome Icons

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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,

Part 12 – Using Font Awesome Icons with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

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

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Part 10 – Using TypeKit Fonts with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Part 9 – Using Adobe Edge Fonts with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Part 8 – Using Google Fonts with Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies 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

Part 7 – Self Hosting Fonts on your Server

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Part 6 – Introduction to Web Fonts

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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

Part 5 – Using CSS3 Text Shadow to Enhance your Design

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

Part 4 – Using Text Align & Vertical Align for Positioning

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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

Part 3 – CSS2 Text Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Part 2 – CSS2 Font Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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

Part 1 – Introduction to Fonts, Font Families, Font Stacks

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

Customize Thesis Skins Using Custom Fonts

Difficulty Level -

Filed Under Topics - , , , , ,

Listed Under Lesson Subjects -

Applies to -

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

How to Use Adobe Edge Fonts with Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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