1. Web Design
  2. Adobe Muse

How to Use Web Fonts With Adobe Muse

This post is part of a series called All About Adobe Muse.
Quickly Create a Website With Adobe Muse CC 2014
How to Create Buttons in Photoshop and Adobe Muse
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

In this tutorial I will show you how to use web fonts in your Adobe Muse projects. We’ll cover font options offered within the web font catalogue, including Google Web Fonts and fonts hosted yourself.

We’ll also look at how Adobe Muse handles type which can’t be rendered with web fonts, so let’s get started!

Watch Screencast

Download the video or subscribe to Tuts+ Web Design on Youtube.

Read the Tutorial

Hi, there, and welcome back on Tuts+ for a new tutorial about Adobe Muse. I am Michael Chaize and I will show you how you can use web fonts in your projects. So, with Adobe Muse, you can select a block of text, and using the Text tool, you can, of course, define the typeface that you want to use in your design.

You can use the Web Safe Fonts, which is a list of fonts installed by default in all browsers, but these are fonts defined by Microsoft in 1996. So, you may want to add a little bit of fun and creativity in your design using web fonts. So if you say that you want to add Web Fonts, you can access the Adobe Edge Web Fonts Catalogue.

Adobe Edge Web Fonts Catalogue

So this is a catalogue of free web fonts, actually it includes all the Google web fonts and it’s hosted by Adobe. So you can say, for instance, that you want to use Aladdin, so you just check it, you press OK, and it will add Aladdin to your list of fonts.

Now you can go back and say that you want to use Aladdin. So, when you publish your page and then check it in the browser, you can see that I can select the text. This is real text on the web.

Your System Fonts

Why am I telling you this? Because if you want to use a font family only installed on your computer, here is what will happen. So, I select my text and I browse my fonts on my computer. And let’s say that I want to use Mistral. You will see a new icon appear on your screen.

It means that this font is installed on the computer, which is fine. But it doesn’t mean that you can use it on the web, it’s not a web font and maybe you don’t have a license to use it on the web. So that’s why Adobe Muse, when you publish your page, will convert it into HTML. It will take the text and convert it into an image. So now, I cannot select the text, okay. It’s an image. And you see, it’s not crisp and, for, search engine optimization, this is not good. Because the Google robot will not be able to analyze the content of this text.

So, for several reasons, this is not something you want to do. Maybe it can be useful sometimes for a title. Okay, you want to keep the look of the font. That’s fine. But there are so many web fonts available on the web. So, I will show you how you can use any kind of web font with a proper license for the web.

Web Fonts

So, if you go back to the web fonts menu you can access the catalogue of Edge Web Fonts. There are more than 500 fonts. I mean, that’s a lot.

Or you can use self-hosted web fonts. Adobe Muse needs WOFF, EOT or SVG files which are open standards to describe fonts on the web for a web browser. So let me show you what you can do. I will just pick a website that is listing free fonts for commercial use, which is Font Squirrel.

What I like on Font Squirrel is that you can easily filter the content of the catalogue, and say that I want a font that I can install and use on my desktop, but also on my website.

So, I will check the web font filter here. And then you can of course pick a Category, a Classification. So, I need Slab Serif font and it looks nice actually, so I will download the file.

So I have Bold, Bold-italic, Italic and Regular, so I will install Regular on my Desktop. I just double click and install the font. Now I can use it in my Adobe Muse site, but as you can guess, it will behave as Mistral, so as a system font.

So, I go back and select Bitter. Okay, I have it in Muse but it will be converted into an image, and this is not what I want. I want to use Bitter as a web font. So again, the issue here is that, when you go back here, Add Web Fonts.

It’s waiting for WOFF files or EOT files. So, on Font Squirrel, there is a free service called the Web Font Generator, that you can use.

So, I will add the fonts. It will upload the font, then I click on Download Your Kit. And it will create a new zip file for me, which this time will contain web fonts.

Okay. So, this is the New folder, and now I have an EOT file, SVG, WOFF. So, I can use it in Adobe Muse. So if we go back in Adobe Muse, I can now Browse My computer and select this New folder that contains the WOFF, EOT, and SVG files.

But again, I check the box, just to confirm that I have a proper license, I can use it on the web. And, Adobe Muse will automatically do the match with the Bitter Font that is installed on my system. Okay. So, it’s very important for Muse because in the Desktop app, I will use the system font and once on the web it will use these set of fonts.

I Publish the Page. We notice that this is text okay. This is how can add, web fonts directly in Adobe Muse. And we all know, that typography is essential in Web Design. And there are so many web fonts available. I think it’s a great addition.

More Adobe Muse

For a more detailed look at Adobe Muse take a look at my free course Designing and Publishing Websites With Adobe Muse.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.