Build Your Own Business Website header image

Web 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

How to Add Custom Fonts to Custom Thesis 2.1 Skins

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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. Member: I have another question. Rick: Uhuh. Member: So I want to use font kit from adobe and, Rick: And which font? Typekit

Part 13 – Create Social Media Links with Font Awesome Icons

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

We are going to continue using Font Awesome icons in this customizing the Genesis Theme series. And up next we're going to create some social media links. We’ll add a widget up here in the child theme for those social media links. First, let's come over to Appearance and Widgets and in our primary sidebar

Part 7 – Using Self Hosting Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So now that we've had that little introduction to web fonts for this customizing Genesis Child Themes seminar, we're going to start off by looking at self hosting fonts. One great place to get self hosted fonts is Font Squirrel. Font Squirrel has tons and tons of fonts, these are all web fonts and they

Part 11 – Using Fonts from MyFonts.com in a Genesis Child Theme

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

You’ve seen how to add quite a few custom fonts to your Genesis Child Theme but we’re not done yet. Next up we're going to go to myfonts.com. Okay, myfonts.com and we’ll sign in. Myfonts.com essentially sells fonts so you can buy a license to use the fonts. However, the fonts are self-hosted that is

Part 10 – Using TypeKit Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Next up in this seminar on Customizing Genesis Child Themes with Custom Fonts we are going to talk about using Adobe TypeKit. Let's go to Adobe TypeKit now, typekit.com. Adobe TypeKit is a subscription based service. I forgot I have to get out of Chrome, I can't log in to my real account so we're

Part 6 – Introduction to Web Fonts

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We’ve gotten through all the introductory bits in this Customizing Genesis Child Themes with Fonts so now we get to talk about web fonts. We’ve spoken already about web safe fonts, that is fonts that you can reliably expect to be available on your viewer's computers. But the kind of fonts that we're going to

Part 9 – Using Adobe Edge Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just covered how to add Google Fonts as part of this seminar on Customizing Genesis Child Themes with custom fonts. And now I’m going to show you how to use Adobe Edge fonts. So we're going to come over to Adobe Edge and Adobe Edge fonts are free fonts. I think they're free for

Part 8 – Using Google Fonts in a Genesis Child Theme

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

As part of this seminar on Customizing Genesis Child Themes with custom fonts we’re going to begin talking about specific fonts. And we’re going to begin doing that with Google fonts. Google fonts are a whole lot easier than this process I just showed you for self hosting your own fonts. Let's come over to

Part 4 – Using Text Align and Vertical Align for Positioning

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We just covered CSS2 text properties so the next thing I want to talk about is using text-align and vertical-align for positioning in Genesis Child Themes. You can use text-align and vertical-align for positioning things like images and we're going to do that in just a moment. But one of the things people routinely ask

Part 3 – CSS2 Text Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now that you have the lowdown on the typical CSS2 font properties for Genesis Child Themes, we'll go on to talking about CSS2 text properties. Text properties have a way of affecting the letters or the text. They are separated from the definition of the font and generally refer to more of a block of

Part 2 – CSS2 Font Properties

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So having discussed font stacks and the basic types of fonts used in Genesis Child Themes, let’s move to CSS which has a whole series of font properties that we are going to look at here. We're going to start off with the font family because that's essentially what we've talked about, right? We have

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 this special seminar on customizing Genesis Child Themes with Custom Fonts. This is actually lesson 2 in our Customize Genesis Like a Pro series. Today we are going to start off by looking some of the basic CSS font styling rules. Once we're done with that we’ll go on

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