00:00:13:02 - 00:00:15:04
In this tutorial we'll learn how to upload

00:00:15:04 - 00:00:18:08
additional fonts
for use within our MegaEdit products.

00:00:19:29 - 00:00:21:11
So MegaEdit products

00:00:21:11 - 00:00:24:16
require fonts to be installed
locally on the server.

00:00:25:00 - 00:00:28:14
For this,
you need a print ready font file.

00:00:28:23 - 00:00:32:09
So this needs to be a true type font file.

00:00:32:09 - 00:00:34:13
Which is extension .ttf

00:00:35:04 - 00:00:38:07
Certain type
one and type three are also supported.

00:00:39:04 - 00:00:39:29
And the. Font needs to.

00:00:39:29 - 00:00:42:09
Be embeddable.

00:00:42:09 - 00:00:45:12
You also need one or more web
ready font files.

00:00:45:25 - 00:00:51:02
So the recommendation
is at least a true type or open type file.

00:00:51:02 - 00:00:52:07
So that's a .ttf

00:00:52:07 - 00:00:56:06
Or an .otf
which is supported by most browsers

00:01:00:29 - 00:01:02:10
for best compatibility.

00:01:02:10 - 00:01:06:21
Upload fonts in the formats of .woff

00:01:07:13 - 00:01:09:22
.ttf , .otf

00:01:10:20 - 00:01:16:02
.svg or .*eot

00:01:16:02 - 00:01:19:20
So please do note that
even though the print ready true type

00:01:19:20 - 00:01:23:01
font can be used for the web as well,
it is not recommended.

00:01:23:14 - 00:01:25:11
So instead use a special version.

00:01:25:11 - 00:01:26:24
Generated for the web.

00:01:27:25 - 00:01:30:04
We'll see a little bit further on
in this tutorial.

00:01:30:05 - 00:01:31:27
The use of web font.

00:01:31:27 - 00:01:34:14
generator website
such as Font Squirrel.

00:01:35:04 - 00:01:37:16
So this allows you
to upload your original font

00:01:37:24 - 00:01:39:17
and it will convert it to various.

00:01:39:17 - 00:01:41:28
Web optimized formats.

00:01:41:28 - 00:01:44:03
So we can use this even for truetype.

00:01:44:03 - 00:01:47:06
Or open type fonts.

00:01:47:18 - 00:01:50:18
As an alternative,
the font creator may be able to.

00:01:50:18 - 00:01:56:06
Provide you with web
optimized versions of the font.

00:01:56:06 - 00:01:59:05
And finally, it's very important
that you have the license

00:01:59:14 - 00:02:02:06
for the font to use it in printing

00:02:02:06 - 00:02:05:22
and to perform the web preview,
you need an @font-face

00:02:05:22 - 00:02:06:28
license.

00:02:06:28 - 00:02:12:14
By uploading font files on this page you agree that
the fonts are legally eligible for web.

00:02:12:14 - 00:02:17:23
Embedding and printing.

00:02:17:23 - 00:02:20:15
Okay, so the first thing
we're actually going to do here

00:02:21:01 - 00:02:23:16
is create some font categories.

00:02:23:24 - 00:02:27:03
So as we've seen in previous tutorials
covering the.

00:02:27:04 - 00:02:29:09
MegaEdit general data tab

00:02:30:11 - 00:02:32:29
and just to remind you
where to get to that, if you go to.

00:02:33:01 - 00:02:34:09
Catalog.

00:02:34:09 - 00:02:38:05
Product types, MegaEdit and MegaEdit
general.

00:02:38:05 - 00:02:42:12
Data, the third tab along in
there is the font categories.

00:02:42:29 - 00:02:45:29
And as with clip arts, masks,
placeholders.

00:02:45:29 - 00:02:50:21
And spot colours, it's
just a case of generating a new category.

00:02:50:21 - 00:02:55:12
First of all.

00:02:55:12 - 00:02:57:29
So you'll see,
I've already got a few examples in here.

00:02:58:00 - 00:03:00:06
There's three
which have come. In from other products.

00:03:00:17 - 00:03:02:05
However, this one is grayed out.

00:03:02:05 - 00:03:04:29
The Infigo default fonts.

00:03:04:29 - 00:03:09:09
These are a set of 12 default fonts
with an open production license.

00:03:09:09 - 00:03:10:17
You are able to use these.

00:03:10:17 - 00:03:12:11
Straight out of the box.

00:03:12:11 - 00:03:15:29
So if you don't have any additional font
licenses or.

00:03:15:29 - 00:03:16:29
You really don't think.

00:03:16:29 - 00:03:18:29
You need any additional licenses.

00:03:18:29 - 00:03:25:08
You can just utilize the default fonts
that we provide for you.

00:03:25:08 - 00:03:29:27
And when you're actually
in the MegaEdit editor.

00:03:29:27 - 00:03:42:29
These are the fonts
that we have available in that pack.

00:03:42:29 - 00:03:45:19
So to add a new font category,
I'm going to click.

00:03:45:19 - 00:03:46:24
On Add new record.

00:03:48:22 - 00:03:51:02
And then simply add a name and.

00:03:51:02 - 00:03:58:26
A. Description.

00:03:58:26 - 00:04:00:27
So depending on how these fonts are to.

00:04:00:27 - 00:04:04:01
Be used, you may decide to name
the font category after.

00:04:04:01 - 00:04:06:11
A specific product it will be used. Upon.

00:04:07:06 - 00:04:10:28
Alternatively, for a font
which may be used on multiple products,

00:04:10:28 - 00:04:15:02
it's recommended to create a font category
per font family.

00:04:15:18 - 00:04:17:16
So that's the approach will take here.

00:04:17:16 - 00:04:21:01
In this example,
we're going to create a Roboto category

00:04:23:08 - 00:04:24:13
for that entire

00:04:24:13 - 00:04:29:17
font family.

00:04:29:17 - 00:04:31:20
We also have the ability
to make this font.

00:04:31:28 - 00:04:34:12
Category available.
Only for administrators.

00:04:34:12 - 00:04:34:21
So if.

00:04:34:21 - 00:04:37:17
You don't want your end users
to be able to access this.

00:04:37:17 - 00:04:39:08
Font category.

00:04:39:25 - 00:04:42:14
Then you can check that box

00:04:44:26 - 00:04:45:14
and then click

00:04:45:14 - 00:04:47:24
insert.

00:04:47:24 - 00:04:50:04
Next,
we need to configure. That font category.

00:04:50:04 - 00:04:50:29
So if you find the.

00:04:50:29 - 00:04:53:29
Font category
that we've just created and click on

00:04:53:29 - 00:04:57:11
configure.

00:04:57:11 - 00:05:00:05
You'll see the layout is very similar.
To a lot of the other.

00:05:01:08 - 00:05:01:27
General.

00:05:01:27 - 00:05:07:20
Data categories
that we've seen in previous tutorials.

00:05:07:20 - 00:05:09:16
You will see that we have the page tags.

00:05:09:16 - 00:05:10:22
Capability at the top of the.

00:05:10:22 - 00:05:15:00
Screen as it stands at the moment, page
tags are not supported

00:05:15:00 - 00:05:16:11
for font categories.

00:05:16:11 - 00:05:23:04
So these options should be ignored
for the time being.

00:05:23:04 - 00:05:24:28
We also have a little bit of additional.

00:05:24:28 - 00:05:26:20
Support for fonts.

00:05:26:20 - 00:05:29:29
So due to the inherent.

00:05:29:29 - 00:05:32:15
Complexity, we've. Provided
a little bit more information.

00:05:32:15 - 00:05:34:17
For you.

00:05:34:17 - 00:05:36:23
So to summarize
what this is talking. About.

00:05:36:23 - 00:05:37:24
There are two.

00:05:37:24 - 00:05:40:01
Options available for font installation.

00:05:40:16 - 00:05:46:08
There's a manual approach
and there's an automatic approach.

00:05:46:08 - 00:05:48:09
Okay.
So I'm going to. Collapse that again and.

00:05:48:10 - 00:05:50:15
We'll cover bits of that information.

00:05:50:15 - 00:05:54:13
As we need. It.

00:05:54:13 - 00:05:57:02
So what I'm going to do
next is actually navigate.

00:05:57:02 - 00:05:57:16
To our.

00:05:57:16 - 00:05:58:06
Web Font.

00:05:58:06 - 00:06:00:18
Generator. Website, and that could be.

00:06:00:18 - 00:06:04:11
A website such as font squirrel,
which actually there is a link

00:06:04:11 - 00:06:11:19
to this inside that information tab.

00:06:11:19 - 00:06:14:04
So the use of this website is fairly
straightforward.

00:06:14:14 - 00:06:16:26
Each font needs to be uploaded
individually.

00:06:17:04 - 00:06:18:17
There is no mass upload.

00:06:18:17 - 00:06:21:11
Function
available on the font squirrel site.

00:06:22:04 - 00:06:31:26
So if I just go for upload
fonts, locate my relevant font. File

00:06:34:08 - 00:06:35:25
and click open.

00:06:35:25 - 00:06:39:00
There isn't initially any indication
that it's doing anything, but it is.

00:06:39:00 - 00:06:42:21
Processing that font in the background
and it will appear in a moment

00:06:43:14 - 00:06:44:17
like so.

00:06:47:23 - 00:06:49:11
The next step we have basic.

00:06:49:11 - 00:06:52:01
Optimal or expert. Capabilities.

00:06:53:02 - 00:06:55:05
So these primarily control the.

00:06:55:05 - 00:06:58:14
Number of web fonts
generated from your font file.

00:06:59:27 - 00:07:00:18
We're going to use.

00:07:00:18 - 00:07:04:18
The expert capability.

00:07:04:18 - 00:07:07:10
We're just going to choose
a number of different font formats.

00:07:08:11 - 00:07:09:25
So just select them all.

00:07:09:25 - 00:07:13:23
You can only have one type of EOT font
format specified.

00:07:14:11 - 00:07:16:10
I'll just go for lite.

00:07:16:10 - 00:07:17:21
We don't need to concern ourselves

00:07:17:21 - 00:07:20:09
with the rest of the options
on this page for our purposes.

00:07:20:18 - 00:07:24:05
So I'm just going to scroll
right to the bottom and click agreement.

00:07:24:19 - 00:07:27:18
So that's basically confirming
that we are legally

00:07:27:18 - 00:07:30:25
eligible
to use these fonts for web embedding

00:07:32:09 - 00:07:41:22
To reiterate, it is the clients responsibility to
have the correct license for font usage.
It is not the responsibility of Infigo.

00:07:46:21 - 00:07:48:13
I'm going to repeat. This process for.

00:07:48:13 - 00:07:50:24
A slightly different.
Version of that font.

00:07:51:14 - 00:07:53:25
So if I go for upload fonts again,

00:07:53:25 - 00:07:57:29
I'm also going to choose a bold version
of that particular font.

00:07:58:19 - 00:08:00:06
So we want to be able to have multiple.

00:08:00:06 - 00:08:02:14
Different variants of the same. Font.

00:08:02:14 - 00:08:05:22
Uploaded into our Infigo MegaEdit editor.

00:08:06:07 - 00:08:07:08
But first we need.

00:08:07:08 - 00:08:10:26
Our web fonts available for every single

00:08:10:26 - 00:08:13:07
one of those fonts,

00:08:14:25 - 00:08:16:10
So I've downloaded three.

00:08:16:10 - 00:08:18:06
Font kits that we're going to utilize.

00:08:18:06 - 00:08:18:24
Roboto.

00:08:18:24 - 00:08:24:17
Regular Roboto, Bold and Roboto italics.

00:08:24:17 - 00:08:27:28
So before adding a web
font kit to configure,

00:08:27:28 - 00:08:29:26
we need to select the type of font.

00:08:29:26 - 00:08:31:15
That we want to use.

00:08:31:15 - 00:08:33:20
So you can see that
the font type options we.

00:08:33:20 - 00:08:34:10
Have here are.

00:08:34:10 - 00:08:38:03
Matching the styles of fonts
that we have downloaded.

00:08:39:20 - 00:08:42:00
And these relate to the bold and italics.

00:08:42:00 - 00:08:45:15
Icons
that are available in the MegaEdit editor.

00:08:46:15 - 00:08:47:24
We don't have to assign.

00:08:47:24 - 00:08:50:00
Fonts to a specific font. Type.

00:08:50:00 - 00:08:53:04
We can add. All fonts as a normal type.

00:08:53:04 - 00:08:54:04
And this means that they'll.

00:08:54:04 - 00:08:56:29
Simply appear
within the list of available fonts.

00:08:58:03 - 00:08:59:03
However, if you do

00:08:59:03 - 00:09:01:10
this, the bold and italics buttons

00:09:02:03 - 00:09:04:23
in the UI
for those fonts will be disabled.

00:09:05:03 - 00:09:10:20
So it's all depending on how you want
the user experience to be.

00:09:10:20 - 00:09:12:03
So what we cover this in our. First.

00:09:12:03 - 00:09:14:12
Example, we will simply create a list.

00:09:14:12 - 00:09:15:27
Of available fonts.

00:09:15:27 - 00:09:16:15
Rather than.

00:09:16:15 - 00:09:21:27
Assigning them to bold and italics.

00:09:21:27 - 00:09:24:17
So in here I'm
going to make sure that I'm on my normal.

00:09:24:17 - 00:09:29:19
Font type selection, and I'm
just going to drag and drop my font web

00:09:29:24 - 00:09:34:27
files to the upload area.

00:09:34:27 - 00:09:39:12
I can see that
all three of those fonts have been loaded.

00:09:39:12 - 00:09:40:03
Then I'm going to move.

00:09:40:03 - 00:09:41:00
Down and click on.

00:09:41:00 - 00:09:46:28
Generate Font Data.

00:09:46:28 - 00:09:49:03
If I need to amend any of the relevant
font.

00:09:49:03 - 00:09:52:25
Data, I can just click on the edit
button here and that will show me some.

00:09:52:25 - 00:09:53:09
Additional.

00:09:53:09 - 00:09:55:23
Information
for all of those fonts that we've uploaded.

00:09:56:07 - 00:10:00:24
So this will be split into three sections.

00:10:00:24 - 00:10:02:19
Now, most of this
we don't need to worry about.

00:10:02:19 - 00:10:05:00
So the only thing that we might want to
change.

00:10:05:00 - 00:10:06:16
Is the. Font family.

00:10:06:16 - 00:10:07:24
Name for each of the fonts.

00:10:08:24 - 00:10:09:11
As that is.

00:10:09:11 - 00:10:12:12
What we'll be displayed
in the user interface.

00:10:13:13 - 00:10:16:02
So for example,
I've got Roboto bold up here.

00:10:16:12 - 00:10:17:21
Maybe I want that to be a little.

00:10:17:21 - 00:10:23:17
Bit more user friendly.

00:10:23:17 - 00:10:25:23
Roboto italics

00:10:31:12 - 00:10:36:21
and Roboto regular.

00:10:36:21 - 00:10:40:11
Do not change the print file
name as that will corrupt the font

00:10:40:26 - 00:10:41:27
and that is where we.

00:10:41:27 - 00:10:48:11
Link the uploaded font data.

00:10:48:11 - 00:10:49:29
Click okay to. Save that. Data.

00:10:49:29 - 00:10:53:13
And then there's a few areas
that we need to actually clear the cache.

00:10:53:27 - 00:10:57:00
For our system in order to be able
to view this correctly.

00:10:58:00 - 00:11:00:00
And this will not be

00:11:00:00 - 00:11:03:12
an issue for an end user
is simply for administrators with a lot.

00:11:03:12 - 00:11:04:13
Of data already.

00:11:04:13 - 00:11:05:12
Cached.

00:11:05:12 - 00:11:07:17
As we've been working on our products.

00:11:08:12 - 00:11:11:14
So I'm just going to scroll to the top
of that screen and hit frontend.

00:11:11:19 - 00:11:12:05
Clear

00:11:13:13 - 00:11:14:06
for good measure.

00:11:14:06 - 00:11:19:01
I'll hit the clear cache on our admin
area of the top.

00:11:19:01 - 00:11:23:05
I'm then going to back out
of my MegaEdit product if I have it.

00:11:23:05 - 00:11:24:00
Open.

00:11:24:11 - 00:11:26:05
And I'm going to clear

00:11:29:16 - 00:11:30:02
the cache

00:11:30:02 - 00:11:34:03
on my browser as well.

00:11:34:03 - 00:11:37:07
Now if I. Relaunch the product

00:11:37:07 - 00:11:38:09
now we won't.

00:11:38:09 - 00:11:41:14
See that font because we've not applied it
to our actual product.

00:11:42:12 - 00:11:44:07
So if. I navigate to.

00:11:44:07 - 00:11:47:07
Our MegaEdit products, screen

00:11:47:07 - 00:11:50:00
and press edit
next to the products of interest.

00:11:51:17 - 00:11:53:23
As we have
with a lot of the other categories, we.

00:11:53:23 - 00:11:56:27
Just need to make sure
that that font selection is

00:11:56:27 - 00:12:00:11
being utilized on our product.

00:12:00:11 - 00:12:01:02
So you'll see we've got.

00:12:01:02 - 00:12:03:03
Our Roboto font. Category now created.

00:12:03:24 - 00:12:06:16
I might turn off the default fonts
as we no.

00:12:06:16 - 00:12:07:06
Longer need them.

00:12:08:18 - 00:12:10:01
Hit save

00:12:10:18 - 00:12:12:20
and then relaunch

00:12:12:29 - 00:12:14:05
my product

00:12:24:25 - 00:12:25:01
more.

00:12:25:01 - 00:12:28:11
You can see if I double click
on one of the text fields.

00:12:29:08 - 00:12:30:01
And go to my font.

00:12:30:01 - 00:12:32:21
Dropdown all three of those fonts
are now available.

00:12:32:29 - 00:12:35:06
But they're listed as separate entries.

00:12:35:20 - 00:12:36:02
So we can.

00:12:36:02 - 00:12:39:11
Utilize them,
but we can't utilize the text options

00:12:39:21 - 00:12:42:20
for bold and italics.

00:12:42:20 - 00:12:44:18
So next we'll take a look at linking our.

00:12:44:18 - 00:12:48:03
Font options
to those user interface icons for bold in.

00:12:48:03 - 00:12:49:09
Italics.

00:12:49:10 - 00:12:51:08
We can also configure our font.

00:12:51:08 - 00:12:52:29
Category to make the. Roboto.

00:12:52:29 - 00:12:55:08
Font family a. Single. Line item.

00:12:55:25 - 00:12:57:21
So instead of having those three
different.

00:12:57:21 - 00:13:00:29
Entries in the user interface,
we can have it so that we've got

00:13:00:29 - 00:13:04:09
just the Roboto line
with the bold and italics functions

00:13:05:12 - 00:13:07:04
working as you would expect them to.

00:13:08:14 - 00:13:09:29
So to begin, we need to navigate.

00:13:09:29 - 00:13:10:18
Back to our.

00:13:10:18 - 00:13:13:02
Font category. Configuration settings.

00:13:13:20 - 00:13:15:23
So just to remind you where that is,
if you're on.

00:13:15:23 - 00:13:17:25
The MegaEdit general data tab.

00:13:19:03 - 00:13:20:22
Font categories.

00:13:20:22 - 00:13:26:14
And then configure
your font category of interest.

00:13:26:14 - 00:13:28:23
Now this is a fairly simple process.

00:13:28:23 - 00:13:30:24
We just need to upload the.

00:13:30:24 - 00:13:33:08
Files in a slightly different way.

00:13:33:08 - 00:13:36:10
So to begin with, I'm just going to remove
the italics and.

00:13:36:10 - 00:13:43:10
Bold version that I've already uploaded,
so we don't need those anymore.

00:13:43:10 - 00:13:44:15
And then it's just a case

00:13:44:15 - 00:13:47:29
of uploading them one at a time,
but making sure the font type.

00:13:47:29 - 00:13:50:08
Selection is correct.

00:13:50:08 - 00:13:52:23
So if I want to upload the bold version.

00:13:52:23 - 00:13:54:10
Click on Bold.

00:13:56:18 - 00:13:57:21
And then drag and drop the.

00:13:57:21 - 00:13:59:29
Font kit.

00:13:59:29 - 00:14:02:16
You can see that. Now we've. Got the.

00:14:02:16 - 00:14:03:13
b_

00:14:03:13 - 00:14:09:08
Prefix on the front of that font.

00:14:09:08 - 00:14:10:15
I can repeat the process with.

00:14:10:15 - 00:14:15:00
Italics.

00:14:15:00 - 00:14:16:07
Generate font data.

00:14:18:05 - 00:14:20:24
Then the primary change
we need to make here within the font.

00:14:20:24 - 00:14:21:22
Data is.

00:14:21:22 - 00:14:24:26
To make sure that the font.

00:14:24:26 - 00:14:29:11
Family name
is identical for each of these fonts.

00:14:29:11 - 00:14:30:21
If we. Want them to be associated.

00:14:30:21 - 00:14:33:16
Together, the font family
name needs to be identical.

00:14:34:26 - 00:14:37:10
So if I just go for the name.

00:14:37:10 - 00:14:38:14
Roboto.

00:14:40:16 - 00:14:43:13
And I'm going to put that in
for each of my three fonts

00:14:44:09 - 00:14:55:04
next to the font family input, I'll

00:14:57:26 - 00:15:00:02
click, okay, we'll clear.

00:15:00:02 - 00:15:01:28
Our caches again.

00:15:14:00 - 00:15:15:06
And then restart

00:15:15:06 - 00:15:26:18
the editor.

00:15:26:18 - 00:15:27:03
So our.

00:15:27:03 - 00:15:28:05
Font will now be shown.

00:15:28:05 - 00:15:31:08
As a. Single line. Item.

00:15:31:08 - 00:15:32:13
And if I select that, we.

00:15:32:13 - 00:15:33:28
See that the relevant text.

00:15:33:28 - 00:15:36:10
Options are now available for selection.

00:15:36:27 - 00:15:37:22
So we know our example.

00:15:37:22 - 00:15:40:14
We have the bold
and we have the italics version,

00:15:40:14 - 00:15:44:06
but you'll see that I don't have the bold
italics version specified.

00:15:44:23 - 00:15:47:24
So if I have one selected,
I can't select the other

00:15:48:10 - 00:15:54:22
in addition to it.