Transcript

00:00 it's time to jump into the deep end
00:01 we're going advanced hey everybody Joel
00:12 workman here and in this video we're
00:13 gonna be going over some advanced font
00:15 Pro topics or any we going how to inline
00:18 fonts and how we can subset fonts as
00:22 well because that a lot of times when
00:24 you do both of those things together and
00:26 I have a great use case so without
00:29 further ado without me blab in let's go
00:31 ahead and jump in and see how all of
00:33 this cool advanced stuff works so here
00:36 we are inside rapidweaver
00:38 and what we're gonna do in this video is
00:40 learn how to create this header here
00:43 this font Pro header as you see it does
00:46 have some fancy text right
00:49 but there's more to meets the eye here
00:52 because if we edit this header well you
00:55 will notice is this isn't font spelled
00:59 out as font Pro right we're using some
01:02 special codes here to produce these
01:06 extra fancy letters right because this
01:09 isn't the average T or the average F or
01:12 an average PR Road to be to be honest
01:15 right so we're gonna see how we can
01:17 utilize some great features of fonts to
01:22 get some really amazing glyphs in here
01:24 okay then we're going to learn how to
01:28 actually subset that font and then use
01:32 an inline font stack to add that to our
01:36 font Pro page so here we are inside the
01:39 font Explorer Pro and what you'll notice
01:43 is this particular font when you spell
01:47 out font Pro this looks much different
01:49 than what we saw inside rapidweaver
01:52 right we don't have all those really
01:54 fancy characters so if I pasted in all
01:57 those character codes that we saw in
01:59 Rapid River we will then see all of the
02:02 fancy character glyphs that we really
02:05 want to use now how do we get this right
02:09 so inside font Explorer actually if you
02:12 double-click on a font you will be able
02:14 to see all of the available glyphs and
02:17 characters for a particular font now if
02:21 you see here there are a ton of
02:24 different a characters right not all of
02:27 these are you know the normal a
02:30 character there's only one but there are
02:32 a plethora of extra different ways that
02:36 we can write a BC here's a fancy D right
02:41 so there's so many different ways that
02:43 we can do this okay so if we find the F
02:46 that I wanted to use which is right here
02:48 right this is the fancy F that I wanted
02:52 to use now if you look here we have a
02:55 character code which is the character
02:57 cut the HTML character code that we're
02:59 going to want to use it's actually down
03:01 here with a little ampersand right so
03:04 this is the code that I would insert
03:07 into the HTML instead of an F to get
03:12 this particular character okay now if
03:16 I'm loading the entire font family I
03:18 have access to this entire library of
03:23 glyphs so I can use any of these okay
03:27 and if I wonder reference a glyph you
03:29 just simply copy the HTML character code
03:32 for that particular glyph paste it into
03:34 your content area and there you have it
03:36 okay now this particular font is close
03:42 to 300 kilobytes which is pretty large
03:45 and really I'm only using this font to
03:49 display the header font Pro so why am I
03:54 going to load 300 kilobytes of font file
03:58 for seven characters right so what we're
04:03 gonna do now is we're gonna learn how we
04:06 can take the character codes and create
04:11 a subset of this font file okay
04:16 so we're gonna create a subset of this
04:17 font file that only contains the seven
04:21 characters that we know we are going to
04:23 use for this family
04:26 now in order to subset our font what I'm
04:29 going to use is I'm going to use a free
04:30 tool from font squirrel comm just go to
04:34 the generator tab and we're you know
04:36 what want to do is you're gonna upload
04:37 your web fonts it's gonna go here and I
04:41 know on my desktop I have the Samantha
04:45 bold italic Pro so I'm going to select
04:48 this is again this is the full font file
04:51 as you see it's 294 kilobytes I'm gonna
04:54 say choose and it's gonna now upload
04:57 that font file for us now once it's
05:00 uploaded what I'm gonna do is we're
05:02 gonna go into expert mode okay now in
05:05 expert mode we want to make sure let's
05:08 tweak some settings here we don't want
05:10 to off to file we only want wofe for
05:13 true type hinting I'm gonna say keep
05:15 existing cuz I just want to keep I don't
05:17 want font squirrel to modify my font
05:19 right I don't want it to fix anything I
05:22 don't want it to make any adjustments I
05:24 don't want it to fix any spaces or
05:25 hyphens I don't want it to adjust the
05:27 x-height and here we are now into the
05:31 sub setting features and what we're
05:33 gonna do is we're gonna set up custom
05:35 sub setting so what we're gonna do is
05:38 we're gonna go down to the character sub
05:40 setting because we want to sub set only
05:43 the characters that we want and I know
05:45 that I want the oh and the end the
05:48 traditional Owen End characters now the
05:51 rest of the characters that I wanted are
05:52 actually all of those special characters
05:55 and we need to get the Unicode codes for
05:59 each character and paste them in here
06:02 and we do the easily in font Explorer
06:05 so inside font Explorer you'll see that
06:08 along with the other character codes
06:11 where we got the HTML code we have a
06:14 Unicode character and what we want to do
06:16 is we want to copy the unicode character
06:18 II 1 BB so I'm going to copy that
06:22 we're gonna go back into Safari and I'm
06:24 gonna paste that in there now what I'm
06:26 gonna want to do is I want to do a comma
06:28 delimited list of all of the other
06:30 Unicode characters that I need so for
06:34 example I wanted a fancy tea so here's
06:38 the tea that I wanted to use I
06:40 copy that unicode character paste that
06:46 in you're gonna do the same thing now
06:48 for every single special character that
06:51 you want to subset so again verifying
06:54 that inside single characters this where
06:56 you could just subset easily any letter
06:59 or standard you know punctuation here
07:03 okay and then if you wanted any of those
07:05 special characters you're gonna put the
07:08 unicode character set here comma
07:10 delimited pretty simple to do it will
07:15 might be a little tougher to get to some
07:17 of this data I'm using the
07:19 out-of-the-box font book app but
07:22 utilizing font Explorer X as you see
07:24 it's very easy to get at this
07:26 information now once you defined all of
07:29 your fonts basically you go down and say
07:32 yes I am allowed to use these fonts and
07:36 then you're gonna say download your kit
07:38 and what font squirrel is gonna be doing
07:41 is actually gonna generate all of the
07:43 font file for you and some other samples
07:45 CSS and HTML files if you want them and
07:47 it's gonna download them to your
07:49 downloads folder as a zip file so here
07:52 we have my font kit that I've downloaded
07:54 from font squirrel and here is the font
07:57 file that has the subset of the Samantha
08:00 font that I want now I'm gonna do is I'm
08:02 gonna load this into font Pro just so
08:04 that we quickly look and verify that
08:06 this font is exactly what we want
08:09 so here I've loaded that font subset
08:11 into font Explorer and if you notice I
08:13 still I have in my special character
08:15 codes and everything is displaying here
08:18 as I would want now as a test I can go
08:21 ahead and change this to be font Pro and
08:25 if you see here it's missing the
08:27 standard F the T the P and the R right
08:32 this is because those characters are not
08:36 included in this subset so now I could
08:39 take this font file and load it as a web
08:43 font inside the font Pro you know stack
08:45 so I the font Pro then pull in this font
08:49 file from the web and that will work
08:52 perfectly
08:54 however we're gonna go one step farther
08:56 right now inside rapidweaver in inside
08:59 font pro you'll notice that there is an
09:02 inline font stack now traditionally font
09:06 stacks you know web fonts and others are
09:08 referencing files that we published
09:11 online right either their files on
09:13 Typekit or Hoffler or their web fonts
09:15 that we've added to our server the
09:18 inline font stack is a little bit
09:20 different essentially what we do is we
09:23 what's called base64 encode our font
09:26 file and then it is embedded directly
09:30 onto our web page there is no external
09:32 file to pull down the entire file is
09:35 embedded directly onto the web page so
09:39 this means that a lot of times inline
09:42 fonts will download faster because it
09:46 doesn't need to reference an external
09:48 file to be pulled down everything is
09:50 embedded on the page now there's
09:53 obviously benefits and drawbacks from
09:56 doing this right if you're gonna load
09:59 embed an entire 300k font file not sure
10:04 that's gonna be the best performance
10:05 because that's going to embed 300k onto
10:08 your web page or into your CSS right
10:10 instead of loading that as a separate
10:13 transaction you know in terms of the
10:15 requests but in this case we subset it a
10:19 font file so instead of 300k our font
10:24 file is 5 K or 7 K right so we have a
10:30 very much smaller font file that we can
10:33 then embed onto the page now this is
10:37 going to be important so if you have
10:38 let's say on page load I have big fat
10:42 Pro you know this fancy type that we've
10:45 added directly on page load so that's
10:48 the first thing that people see this is
10:51 where in lining your fonts will see huge
10:54 improvements ok because that font is
10:58 going to be downloaded with the web page
11:02 therefore the font is going to show up
11:05 properly immediate
11:07 there's gonna be no fluke right or flash
11:09 of unstyled content essentially if we
11:14 load this as an external file what would
11:18 happen is depending on your internet
11:21 speed right you could see font Pro as
11:25 the fallback font before the font file
11:30 was downloaded so that it could be
11:32 displayed the way you originally
11:34 envisioned it again loading externally
11:39 takes extra time because it's gonna
11:43 download that file separately loading it
11:47 inline in basically encoding the font
11:50 onto the web page will load that font
11:53 faster and guarantee that you do not
11:56 have any flock at all okay however like
12:02 I said there are drawbacks you don't
12:03 want to be in base64 inlining a 300k
12:07 font okay on every single web page okay
12:10 it's gonna be a lot faster in that
12:12 instance to simply load that external
12:15 font let the browser cache that font
12:19 okay at that point the browser's cached
12:22 it and all subsequent pageviews it's
12:24 just gonna be snappy snappy snappy and
12:26 there will be none no flash of unstyled
12:28 content right so you gonna have to play
12:30 around with this again this is
12:32 definitely an advanced topic this is why
12:34 this is an advanced video you have to
12:37 determine whether or not in lining the
12:39 font is gonna be worth it
12:41 for you and your web page okay and I
12:44 highly recommend that you subset that
12:45 font if you're going to inline it okay
12:48 so now let's jump in and see how we can
12:50 inline our fonts I have my font file how
12:53 do I create this encoded strings that we
12:56 embed it directly onto the web page now
13:00 there are many ways to do this there are
13:03 many different apps to do this okay
13:05 there are some web online web tools that
13:08 allow you to do this for free
13:09 I use an app called base64 plus it's on
13:14 the Mac App Store I think it was a
13:15 whopping dollar 99 okay
13:19 and it's really simple to use simply
13:22 click on encode you click Choose file ok
13:26 I drag in the file that I want click
13:28 open and voila there is the base64
13:33 string that I need to copy and paste
13:35 into rapidweaver an inside rapidweaver
13:39 I'm going to paste this particular
13:43 base64 string into the corresponding
13:47 font style here so you can inline
13:51 multiple fonts if you want multiple
13:53 typefaces so you can do the bold the
13:56 normal the italic and the bold italic ok
13:59 in this particular case I am using a
14:02 font for a bold header so I put in the
14:08 base64 string into the bold font area
14:11 and what's great about using inline
14:15 fonts another side effect is that it
14:18 actually works beautifully directly
14:20 inside edit mode right so this is how we
14:22 can definitely be sure that font Pro is
14:25 working via this the inline font stack
14:28 that we're using now in terms of the
14:31 family name and the label um you can
14:34 really name these whatever you want I
14:35 suggest to use the label in terms of
14:37 what you're gonna use it for I'm gonna
14:38 use this for header now for a family
14:40 name since we're using our own file you
14:42 can really name this whatever you want
14:44 ok um I named it Samantha because I'm
14:48 using the Samantha font right so you
14:49 probably want to name it something to
14:51 whatever your font is um that way when
14:54 you're looking back you know kind of
14:55 exactly what font family you're using ok
14:58 um another than that you want to make
15:00 sure you want to apply here I'm using a
15:02 vault for simplicity sake but check out
15:04 our apply video on how to apply your
15:07 fonts and font styles to your content
15:10 and that's basically it everybody right
15:12 that is how we can inline fonts how we
15:17 can subset those fonts and even use some
15:20 special glyphs right so I covered a lot
15:23 of stuff here right um so if you need to
15:26 go back around and pause and you know
15:29 watch in slow motion if you need right
15:31 whatever
15:32 so that you can take a grasp of this
15:34 because we did do a lot inside this
15:35 video a lot it we covered a lot of bands
15:37 topics right um again I used font
15:41 explorer X it is a nice app it's not
15:44 cheap it's not inexpensive right um but
15:46 it is a quality really good quality app
15:48 for font management um you can acquire
15:53 some of this information from font book
15:55 okay which is the font management app
15:59 that comes with Apple um with Mac and
16:03 but font Explorer makes it so much
16:06 easier to use okay so accessing special
16:11 glyphs okay a lot of times when you
16:14 purchase a font from somewhere a lot of
16:16 times they come with like a PDF or a
16:18 document so you can see all that
16:19 information as well so after we defined
16:22 all of the glyphs that we wanted we went
16:24 to font squirrel comm and created a
16:27 subset so that because we only wanted
16:30 the font characters that we needed to
16:33 display because I didn't want to load a
16:35 300k font file I just wanted to load the
16:38 7 characters that we really needed right
16:42 makes sense now we went a step further
16:46 once we downloaded our font file we
16:48 could have taken that font file and
16:49 loaded it using a web font inside font
16:52 Pro however we went an extra step
16:55 farther we base64 encoded that to a
16:59 string so basically we turned the file
17:02 into some characters a string okay
17:05 base64 encoded string using I used the
17:09 base64 Plus app that's on the app store
17:11 okay and then we paste it that Bay 64
17:15 string into font Pro and that's it we're
17:19 done right so I hope you use this I hope
17:23 that it helps you out I know it is very
17:25 advanced and hopefully this helped out
17:29 so thank you very much for watching
17:30 everybody I hope you're enjoying font
17:32 Pro hopefully by now you've probably
17:34 watched all of the other font Pro videos
17:36 and I hope they helped you out so take
17:38 care and have a wonderful day bye"}]