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.
