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
Fonts
Part 14 – Add Icons to the Menu with Font Awesome
February 7, 2014Now 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
Part 13 – Create Social Media Links with Font Awesome Icons
February 7, 2014So 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
February 7, 2014So 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
February 7, 2014Adding 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
February 7, 2014The 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
February 7, 2014You’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
February 7, 2014The 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
February 7, 2014You’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
February 7, 2014Now 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
February 7, 2014The 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
February 7, 2014Now 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
February 7, 2014So 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
February 7, 2014So 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
February 7, 2014Good 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
January 28, 2014Thesis 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
January 24, 2014In 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
How to Install and Use Cufon Fonts in Thesis 2
April 15, 2013In 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
How to Use Google Fonts with Thesis 2.0
October 17, 2012In 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