Build Your Own Business Website header image

How Adobe TypeKit Fonts Work

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 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 and the difference between Windows and Mac for the kinds of fonts that are typically web safe.

We talk about hosted fonts which are delivered to the browser from an external web server so that they can display fonts that are not resident on the computer. These fonts take a couple of different forms. There are self hosted where the web server has the fonts on it and serves those fonts to the visitor’s browser and fonts that are remotely hosted. The latter includes Google Fonts, TypeKit, fonts.com and a number of other font suppliers where the fonts reside on their servers and are delivered by their server.

We recommend watching the video series on Customizing Thesis Skins Using Custom Fonts  which gives a general overview about fonts, font properties and the various versions of fonts.

Video Transcript

Member: Could you talk a little bit about exactly I mean redoing my site you know, I’m promoting it with web safe fonts and basically to keep you know, consistency and everything.

Rick: Uhuh.

Member: But can you talk a little bit about how Adobe TypeKit works as far as… is that a work around so people can see different fonts and I got the Adobe Creative Suite but I can’t really understand, the documentation isn’t really clear about exactly what it does.

Rick: Well, okay so all browsers need some kind of font in order to display text. Now, they generally rely on fonts that are resident on the computer so on a Windows machine you may have 150 different fonts installed on your computer because you’ve got Photoshop, it installs a bunch of fonts, you might have done something else that installed fonts and Word installs fonts. Anyone of those fonts can be used by a browser to display the web page.

Member: Right and if you designed the site obviously though you got to make sure that you know, that the computer that has the browser and is reading you know, have the font the way you want to see it or it could be anything…

Rick: Exactly so…

Member: It’s going to pick a basic  Sans Serif or Serif or whatever. So yeah I understand it and you know, that makes the concept I understand…

Rick: Okay.

Member: But I just.. what I’m curious about is it just seems like with Adobe they’re saying that these TypeKit fonts are do they transfer from browsers or…

Rick: Why don’t you let me finish the general description.

Member: Yeah, I’m sorry. I’m sorry.

Rick: Yeah. So the browsers got the ability to use fonts on your computer and the problem that you mentioned gives rise to the concept of web safe fonts that is the fonts that a web designer can expect that every computer is going to have. Those are referred to as web safe fonts and you have this little issue with web safe fonts being that there is a difference between Windows and Mac for the kinds of fonts that are typically web safe. So for example, Windows has Arial, it doesn’t have Helvetica it has Arial, the Mac has Helvetica it doesn’t have Arial. So web safe fonts are usually given in pairs because the Mac has a different set of fonts than thus a Windows machine and then you have this whole question of iOS and Android fonts.

Android fonts typically follow Windows and iOS obviously follows Mac. So that’s the concept of web safe fonts and all of that conversation begins and ends with fonts that are resident on the device that is displaying the web page. The other kind of fonts you have are called hosted fonts and those fonts are delivered to the browser from an external web server so that they can display fonts that are not resident on the computer and those are generally referred to as web fonts and web fonts can you know, take a couple of different forms.

Web fonts can be self-hosted which means that your web server has the fonts on it and serves those fonts to your visitor’s browsers or they can be remotely hosted and those are things like Google Fonts and TypeKit and fonts.com and a number of other potential font suppliers where the font resides on their servers and is delivered by their server. Those are essentially the two kinds of fonts that is fonts that are resident on the device and fonts that are served to the device and fonts that are served to the device can either be hosted by your own server or they can be hosted by another server and TypeKit fonts fall into the category of fonts that are hosted on another server.

Now, I have videos on how to do this kind of thing in Thesis 2.1 that is how to use Google Fonts, how to use TypeKit Fonts, how to self-host fonts, how to use FontAwesome fonts or icons and that kind of thing and what TypeKit does let’s see, let’s go back to my site.

Member: Yeah, that’s why I wanted to get just a brief overview from you before I started into the videos with the webinars so thank you.

Rick: Yeah, so Customize Thesis 2.1 Like a Pro has the lesson 2 and that is Customizing Skins Using Custom Fonts and it does have a little general overview like this about fonts, font family, font stacks that kind of stuff and then font properties and then you know, web fonts, various versions of web fonts. This is an example of how to self-host web fonts, this is an example of how to use Google Fonts, this is an example of how to use Adobe Edge Fonts. Adobe has two different kinds of fonts, they have Adobe Edge Fonts which are.. they’re actually free.

You don’t have to have a subscription to access them and then you have TypeKit Fonts which are not free and you do have to have an active subscription in order for them to be served and then you have other fonts like myfonts.com and FontAwesome and that sort of thing but using Adobe Edge Fonts which are also available to you. Using Adobe Edge Fonts and using TypeKit Fonts are different. Using Adobe Edge Fonts is very similar to using a Google Font whereas using a TypeKit Font you have to you know, set it up on TypeKit, you have to set up the domain and the license and all that kind of stuff and then you have to set it up on your website but in any case, I have videos on all of that here.

Member: And real quickly, what about you know speed and tracking issues. Are your users being… does this give Adobe access or Google access to your users or there are speed issues with loading…

Rick: Well, I don’t think there are any privacy issues associated with using these things. I don’t think there are any privacy issues associated with using them. I don’t know that for absolute certainty but I think everybody would be surprised if you know, hosted fonts are being used to gather information about visitors to the site but there can be speed issues. Some people say that Google Fonts will slow down a site. I’ve certainly seen that happen – seen Google Font slow the site down.

The more fonts you use the slower your site is going to be, Google Fonts will show you a little meter telling you that it’s not you know, how heavy the load is for the fonts you’ve selected. I think TypeKit also does that, tells you what the load is on the site for the amount of fonts you use so you definitely want to be sparing with the fonts but using external fonts is pretty common these days and you just have to make a value judgement about whether or not the potential for slowing the site down is worth the benefit.

Member: How much more work it’s going to take me? Yeah, I just did my own site so I’ve been at it longer than I need to be but you know again, your my Google and it sounds like I keep asking questions that you already got documentation on them.

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