Click on any phrase to play the video from that point.
[Learn - The How To series from Adobe]
[lynda.com presents]
[the following is an excerpt from the training tutorial at lynda.com - Muse Essential Training with James Fritz]
For many years, web designers have been limited
by what fonts were on people's computers.
However, in the past few years, there have been a variety of companies
that have been licensing web fonts to designers.
One of the most popular web font companies is Typekit,
and these fonts are directly integrated into Muse.
Let's go to the About Us page.
With my selection tool I'm going to select the frame About Us.
If I would want to use a font other than a web safe font,
normally it would export as an image, which isn't really what I would want.
So instead, I'm going to try out these web fonts.
When I choose Add Web Fonts, a Typekit browser is going to appear.
In order to work with this, you have to have an active Internet connection.
There are a large number of fonts available in the Typekit browser.
There's a particular font I'm looking for,
so I'm going to choose Filter By Name and I'm going to type in droid.
And the font that I want is Droid Serif, so I'm going to click on it to select it.
Next I'll remove my search so I can see all of the fonts again.
The Droid Serif font will be good for my body text,
but for my headline I'm not exactly sure what I want,
so I have a few different filters that I can use to find the correct font.
The first filter will just show sans serifs.
So if I click on this, we'll only see the sans serif available.
Next we can see just the serif fonts,
followed by slab serif,
script,
blackletter,
monospaced,
hand, and decorative.
The last 2 boxes are recommended for either headings or body text.
In this case I want to find a heading,
so I'm going to choose this one, and I think I'm going to grab League Gothic.
That sounds good.
Now that I have my fonts selected, they'll automatically be downloaded into Muse.
Let's try out one of these fonts.
I'm going to go into Web Fonts, and we can see here are the fonts that I've selected.
There's 4 different Droif Serifs and my League Gothic Regular.
You may be asking yourself, "I only chose 2 fonts in WebKit."
"Why are there 5 different fonts here?"
The reason is Droid Serif had multiple weights, including bold,
bold italic, italic, and regular,
so it automatically brings all of them.
You don't have to use all of them, but it's great to have options.
But in the case of this headline, I'm going to use League Gothic Regular.
There we go.
That looks pretty good, although I'm going to make this a little bigger so we can see it.
And maybe even a little larger, 60 point. There we go. I like that.
Now, to make sure this is a real live font, I'm going to click the Preview button.
In Preview mode I can select the text to ensure that this is a real font and not a picture.
Let's go back into Design mode and add some more fonts.
Let's go to the body text here,
and I'm going to select all of this and change this to Droid.
We'll do Droid Serif Regular.
That's a little big, so I'm going to make this a little smaller.
We're going to go down to 11 point and increase the leading.
There we go. That looks a little better. Maybe a little more. 145. Perfect.
Next I'll grab the subhead, and we're going to change this to League Gothic Regular.
A little larger.
And we'll do this one too.
And finally, the 2 at the bottom.
These 2 will be League Gothic Regular.
We can go into Preview mode and let's test it out.
Excellent. It's all real text.
Now that everything is set up correctly,
it doesn't matter if we export our site to HTML or publish our site with Business Catalyst.
Either way, Muse will automatically write the necessary code
to render our fonts on everybody's computer
regardless of what fonts they have installed.
In addition, over time, more and more Typekit fonts will be added to Muse,
so check back to see if your favorite font has been added.
