When using Adobe Muse, it's important to have an understanding of the different types of fonts that you can use on the web. After that, you can start to learn about how to integrate these fonts into your page layouts in your layout application. This video tutorial helps you understand the basics of how to work with web fonts in Muse.
- In the previous movie we talked a little bit about the difference between standard fonts and also web fonts. But in this movie I'm gonna show you how to work with web fonts inside of Muse. Let's go ahead and double click on the About Me page here and once we're on this About Me page, what we're gonna do is we're gonna scroll down to where it says "About Me". And we're going to select that. And when I select that, you're gonna see that it is using Helvetica as the font choice. But what I wanna do is substitute this for something a little bit more stylistic. So what we're gonna do is we're going to add in a new web font.
You can see here at the top that I have several fonts already loaded into the web fonts panel. This is based on fonts that I have synched either to my Desktop, via Typekit Desktop font synching that are also available on the web or fonts that I'm using inside the documents that you see here. You may or may not see these fonts in your font list and that's ok. I'm gonna show you how to add them in. So let's go up to the Add Web Fonts button. Once we hit Add Web Fonts, it's gonna take us into this dialog box. Inside of this dialog box here you're gonna see three tabs.
The first tab is for Typekit and Typekit fonts are the big repository of fonts that Adobe purchased a few years back. And originally they were only meant to enhance typography on the web. But now you have the ability to also synch Typekit fonts to your Desktop for use in applications like InDesign, Photoshop and Illustrator. That's why in that list that you saw earlier, There were several Typekit fonts already in there. I haven't been using Typekit fonts inside of Muse yet but because I have those web fonts synched to my desktop computer for use in those other apps they're showing up in here as well.
You should know that not every single web font is able to be synched to the Desktop and vice versa. So there may be times when you want to use a Typekit font in Illustrator, let's say, but you wouldn't be able to use that inside of Muse. Or you might find a font that you want to use in Muse and then you can't use it in Illustrator. It's just something we have to deal with. Inside of the Typekit panel you'll see a list of all of the different fonts which there are several, by the way. If you want to filter those out, you can do that with the Filter panel over here. And this Filter menu over here acts much the same way as the Typekit website does.
So you could click something like San Serif and then choose something like Headings with Heavy Weight. And once you do that you'll get choices. Once you find a font that you like, all you have to do in order to synch it to your document is select it by clicking on this little check mark right here. And let's just add a couple. So let's add Cubano Sharp and Quatro. Just click those check marks and hit Ok. Once that is applied, you're gonna see that it's adding the web fonts to my system. I can now go back to the Text drop down and you will see in my web fonts there is Cubano Sharp and also Quatro.
So now I can play around with these. Let's add Cubano Sharp, Regular as the font choice there. And it's automatically applied to my text. Which is nice. Now in addition to that, I can use the Edge Web Fonts as well. So let's select these paragraphs down here. Let's go back to the Type drop down menu. And let's go up here to Add Web Fonts. And instead of Typekit this time, let's go to Edge Web Fonts. Edge Web Fonts are the original web fonts that shipped with Adobe Muse. And there are a lot of different good fonts in here that I use quite a bit. One of my favorites for body text is Abel.
So I'm gonna go ahead and check that and hit Ok Once I check that, that's going to then add that to my list. I can find it. Apply it to my text. And then let's go ahead and unify the appearance of this text. Let's make it all kind of a lighter grey. And let's increase the font size just a little bit. And there we go. So now you can see all of that has been applied. Those fonts are going to be available to me anytime in this drop down. You will also see a list of the recently used fonts here. Over to the right, you can see where the fonts are coming from.
So you can see that this is a Typekit font, this is an Edge Web Font and so forth. The last piece of the web font puzzle is something called a Self-Hosted web font. The Self-Hosted web font means that you have purchased a font from somewhere like Fonts.com or MyFonts or something like that. And once you have purchased that font, if it includes web versions of the font which would be a .woff, .eot and .svg file alongside of the normal TrueType or OpenType version of the file then what you have to do is download that to your computer somewhere then browse inside of Muse and go find that folder.
Find the folder that contains all of those individual elements. And then once you find those individual elements you can load them up. Let's go ahead and jump into a browser for a second. And once I'm in the browser, what I'm gonna do is go to a web site called fontawesome.io. And this is a web font that uses icons as its text. So basically, if you're looking to use icons in your designs and you don't want to use images, this is a great font to use. In order to download it, you just click the big Download button. So I'll download that to my computer.
And then I'll open up this section here. And here's the fonts. So I'll just grab the fonts and I'll drag them out to my Desktop. Once I put them on my Desktop, I'll jump back over into Muse. Let's click Browse and then go to my Desktop, hit fonts and then hit Choose. That is going to load them in. You can see it found the woff, the eot, the svg. And I'll click there to continue. And once I do that, it should go ahead and install-- Oops, what happened? If you see this happening, that means that you have not installed parts or pieces of this font.
So let's go to the Settings. It says it could not find the matching system font. Why is that? I didn't install it. So let's go out here to my Desktop, find the TrueType version of the font or the OpenType, I'll just do TrueType for now and once I get TrueType, install it. On Windows you would just drag this to your font folder, of course. And then we'll just go ahead and install it. Once I do that, hit Ok. And let's match this with a system font really quick.
So let's go down... find FontAwesome in the list. And if you don't see FontAwesome in your list right off the bat that's ok. Just hit Cancel here, Cancel here and let's go back and Cancel this one more time. Let's hit Yes to cancel out. It's gonna cancel out. Let's go back and add that in. So let's go back, Add Web Fonts. Self-Hosted, Browse, the fonts folder. Hit Choose. There we go, everything is cool. Hit Continue. And now, since I installed that, everything is good.
I hit Ok and now all I have to do is place out some text that uses that web font. So I'll grab my Type tool. Just draw out a little text box down here at the bottom so you can see what I'm doing. Switch the font choice over to FontAwesome. And then I'll just type some letters here. You can see it doesn't do anything. Well, what's going on? Well Font Awesome works with glyphs in Unicode characters. So let's go back over to the Font Awesome web site. And if you go to fontawesome.io/cheatsheet that's gonna take you to a big reference page with all of the different icons.
So for instance, if I grab something like this little ambulance icon, copy it to my clipboard and then paste it in, I can then put that icon in my design anywhere I want. And it works just like a piece of text. You can add normal states, hover states, that kind of thing to it. You can make it a hyper link. You can make full-on social media widgets out of these things. It's totally up to you. But it's a great way to add in your own Self-Hosted web fonts and also icon fonts if you need to.
Hopefully, that explains a little bit about the difference between the Typekit fonts, Edge Web Fonts and the Self-Hosted web fonts. Now you should be fully aware of what those are, how to use them and you can start implementing them in your designs.
- Becoming familiar with the Muse interface
- Creating a sitemap
- Setting up master pages
- Working with headers and footers
- Importing and embedding graphics
- Scaling, rotating, and aligning page objects
- Wrapping text around images
- Working with web-safe and Typekit fonts
- Creating links
- Adding menus for navigation
- Inserting an interactive map
- Adding a Facebook Like button
- Building a Business Catalyst form
- Exporting the site to HTML