What we want to take a look at now is the remote hosted solution when it comes to web fonts.
We're going to be working with Adobe Edge Fonts specifically, as it's nicely integrated with Dreamweaver CC.
The process is incredibly easy.
What we want to do is make sure that we have a selector highlighted.
So, I'm going to go ahead and collapse this Media section, and I'm going to select .textSizePx, and in the Properties category, I'm going to come over to the Text section.
Here we can see that we have "Gill Sans" applied but if you go ahead and click on that, down towards the bottom, you can choose Manage Fonts...
When you do that, it opens up the Manage Fonts dialog box and here we're going to see all the available Edge Web Fonts.
These are free and available for you to use.
These are fonts collected by Google and Adobe and other designers.
Like I said, this is a free service, so you can use any one of these fonts if you want.
If you're looking for a particular font, you can go ahead and filter this list by name.
You'll also notice that you can list fonts recommended for headings only or you can list fonts that are recommended for essentially body copy, or of course, you can deselect both of those filters.
You can also filter by style, such as Sans font source or Sans Serif fonts.
There's also Slab fonts.
And you can go down the list.
If you know that you're looking for a decorative font, you can go ahead and select that, and it will filter the list further.
You can then find the font that you want to use.
In this case, I'll come over here and I don't know, I'll select one that's going to be pretty obvious that we're using a decorative font.
I'll go with this one right here.
When you select it, a little checkmark appears.
Down here towards the bottom, it simply states that by clicking Done, you agree to the Edge Web Fonts service.
If you want to learn more about that, you can click on Terms of Use.
But once you go ahead and click Done, nothing really happens to your type, but it's now available within the font family property.
Down here towards the bottom, you will see that custom Edged Web Font.
Again, it has its own little icon and it appears in its own section within this list, making it easy to distinguish the differences between self-hosted web font, in this case, a remote hosted web font through Adobe Edge Web Fonts, or of course up here towards the top, we have the desktop fonts.
So, in this case, I'll go ahead and select that.
Once I choose that, if I had any font weight or font size properties applied to this type beforehand, I'd get a warning mentioning that those properties would probably be changed.
Additionally, if you want to see it rendered, you have to go into the Live view.
When you go into the Live view, you can see that custom type.
Now, what's happening in the background that differs from this @font-face declaration that we're working with in the previous movie?
Well, if we take a look at the source code, all we have here is a JavaScript.
And this JavaScript is simply pointing to a JavaScript file on Adobe's servers.
So, as you can see, implementing these remote hosted web fonts are pretty easy.
Now, if you wanted to, you could come in and create a font stack, so there would in fact be a backup in case for some reason this didn't load properly or whatever the case may be, you may consider doing that.
But as you can see, working with Edge Web Fonts inside of Dreamweaver CC is incredibly easy.
And this is, like I said, a pretty exciting development within the web design world.
Having the ability to work with custom type is something that really wasn't possible only a couple years ago.
You would have to go in and create images for custom typefaces that you wanted to use.
That's no longer the case.
So, you're not reducing the importance of your webpage, at least in the eyes of a search engine because you're using images instead of text.
But those are your options for working with fonts inside of Dreamweaver CC.
