Transcript

00:00 so you're ready to join the big leagues
00:01 with hoffler & Co typography hey
00:12 everybody Joe workmen here and in this
00:13 video we're going to be looking at the
00:15 font pro integration with Hawthorn co
00:18 which is typography com okay now this is
00:24 definitely the high end service for
00:27 typography right um it is definitely the
00:30 most expensive option that font pro
00:33 integrates with but hofler & Co have
00:38 some of the most desired and
00:41 internationally famous fonts out there
00:43 for example if you wanted to use Gotham
00:47 which is the thought that was made
00:48 famous during the 2008 Obama campaign
00:50 because that was the font that Obama
00:52 used on all of his flyers and you've
00:55 seen it everywhere right and there's
00:57 other ones like Whitney and Archer that
00:59 are just extremely beautiful fonts that
01:01 are internationally known so and
01:04 typography com or Hoffler does a little
01:07 bit more than that right they have what
01:09 they call screen smarts technology that
01:11 basically customizes the font file for
01:15 the device that your users are coming
01:17 from right so that your fonts are
01:21 strictly optimized for the device right
01:24 and the in the connections and
01:25 everything right so they do a lot of
01:27 work to assure that your fonts are
01:29 loading smoothly and quickly across all
01:33 devices on your site so yes it is the
01:36 most expensive option that we have with
01:37 font pro but they definitely have some
01:40 premium services and premium fonts so
01:43 let's jump in and look at Hoffler and
01:47 how to use its interface now I'm not an
01:49 expert at everything with Hoffler yet
01:52 right but hopefully this general
01:54 overview will give you a idea of how to
01:58 implement Hoffler on in dafont pro so
02:02 here I am logged into my typography com
02:05 account and you'll notice that when you
02:07 log in into the dashboard you'll see
02:10 that you have projects now a proj
02:13 has two different statuses in hablar you
02:16 have development projects and production
02:19 projects okay we're going to review what
02:24 the differences are between those in a
02:26 little bit but essentially when you set
02:27 up a new project it's going to be a
02:29 development project okay then when
02:32 you're ready to finalize that project
02:34 we're going to put that into production
02:36 and then it involves a few extra steps
02:40 now I do have to say that browsing ha
02:44 fleurs fonts are isn't quite as nice as
02:46 type kit or even google fonts right
02:48 essentially he go up to the menu and you
02:50 can see all of the fonts available to
02:52 you right so if we go and view let's say
02:55 Archer you see you can see a general
02:58 page that definitely is using the font
03:00 at the bottom they have some suggested
03:02 pairings with Archer right um you can go
03:06 and view the Styles all the available
03:08 styles for archers so you can see
03:09 exactly the typefaces that you're going
03:12 to get um if you add Archer to your
03:14 library now in the features tab it
03:17 really gives you some really detailed
03:19 information about what kind of makes
03:21 Archer unique by reading through these
03:24 features of all the various fonts it's
03:26 actually a great learning process to
03:28 kind of help you as notice things about
03:31 fonts and what makes Archer and other
03:33 fonts unique right so recommend really
03:36 taking your time to look through these
03:38 feature sets for each font so you can
03:41 make a proper decision on which font you
03:43 want to use for your site now a quick
03:45 note about buying fonts on Hoffler okay
03:50 this was a slight learning process for
03:52 me as well now when you subscribe to
03:56 Hoffler and co ok or topography calm you
04:00 do not have full access to all of the
04:03 fonts that they have available this
04:07 isn't like type kits subscription ok
04:10 their default subscription allows you to
04:13 have five fonts in your library this
04:16 means that you can add five fonts for
04:20 free to your subscription ok so that
04:24 means once you go through the process to
04:26 buy fonts you
04:27 say by a font which I'll show you in a
04:29 minute by a font then you choose the web
04:32 font and the first five fonts that you a
04:34 door that you buy get added to your
04:37 library for free now any subsequent
04:41 fonts you have to purchase on top of
04:45 that right so once you add a font to
04:49 your library that is it you own that
04:52 font as a part of your subscription you
04:54 cannot remove that font from your
04:56 library so this is very important that
05:00 if you're going to use this service that
05:02 you learn that you have to be certain
05:05 one hundred percent certain that this is
05:07 a font that you're going to want because
05:09 you cannot add it to your library and
05:10 test it I I think this is fundamentally
05:15 a flaw in typography com to be brutally
05:17 honest here right I feel that um you
05:22 can't really know if you want to font
05:24 until you use it in your design right I
05:27 would love it if they added the ability
05:29 to use a font inside a development
05:33 project okay and then lock that font in
05:37 once that project goes production right
05:39 I wish they did that they don't so be
05:43 careful once you purchase a fun add it
05:46 to your font library you are locked in
05:48 and that font so you have to be sure
05:51 that that is the font that you want and
05:53 is that hard to tell if that's a font
05:55 you want because you can't test it in
05:57 your designs yes okay now they have the
06:01 ability as you see you can see what the
06:03 text looks like right they have a try a
06:07 button tab inside the font where you can
06:09 type in a sentence and see what it looks
06:11 like is that really using inside your
06:16 design and seeing if that font really
06:18 makes your design work well in my
06:21 opinion no okay but the service does
06:26 have a lot of good things going for it
06:28 right it does have beautiful fonts it
06:30 does have the screen smart technology
06:32 that you know really loads fonts
06:34 dynamically for the device to make sure
06:36 it loads faster all awesome okay
06:40 you just need to know that this is a
06:44 limitation okay i will send them an
06:47 email hopefully they'll change this if
06:49 they do i'll make sure that i update
06:51 this but right now um this is a very
06:53 strong point that needed to make sure
06:54 you know so let's get back to the
06:57 demonstration okay so here we're back
06:59 we're still in the archer and i want to
07:01 go through and show you the by process
07:03 that you understand this fully you click
07:06 on buy these fonts and what you'll see
07:08 is you'll go for show prices for web use
07:11 only okay and what you'll see here I
07:15 still have some available font you know
07:18 selections in my library so i can
07:20 actually click this and purchase this
07:22 and it will add it to my font library so
07:27 I I can actually click and add this to
07:29 my font library but again I'm not going
07:32 to do that right now because I don't
07:34 know if I want Archer and I don't want
07:36 to be locked into it right now okay so
07:39 I'm not going to do that if we go up to
07:42 your account and look at your font
07:44 library you will see in my font library
07:47 I have died it in Gotham okay so I have
07:51 full access to these two fonts in my
07:54 library right now okay and there's a lot
07:57 of type Styles inside of these right so
07:59 diet have has a bunch of different
08:01 things 42 different styles and Gotham
08:04 has 12 different styles associated with
08:06 each font family so you do get a lot of
08:09 um you know typeset or type styles with
08:14 your each font that you add to your
08:16 library so let's go back to the
08:18 dashboard and and look at projects so
08:22 here we are back on the dashboard and
08:24 looking at our projects so let's go into
08:27 this demo project that i created that's
08:28 currently in development mode when you
08:31 create a new project you can define what
08:33 fonts you want to be added to that
08:35 project when i created this when i only
08:37 added this one particular type set and
08:41 then here you can choose exactly which
08:44 font weights and styles that you want to
08:47 load for this project now if i wanted i
08:52 can go and add as many of these as I
08:54 what do I want to add died at 696 to
08:56 this project yes and as you see it is
09:00 now added that font to my project I
09:06 typography column has a lot of other
09:08 really great options here so for inside
09:11 each font I can go to character set and
09:13 then you can define exactly which
09:17 characters you want to display so if I
09:20 know in a particular font face I don't
09:24 want number styles I don't want capital
09:26 letters right you can turn off a lot of
09:30 this stuff to reduce the ultimate size
09:34 of the font that gets loaded on your
09:35 page okay now what's really great is you
09:41 can do custom character set like if you
09:44 know you want to use this font for just
09:47 the main header on your page you can
09:49 load only the characters that you want
09:51 for that font which will make it super
09:54 small and load super fast on your web
09:57 pages now once you've made all your
09:59 changes just go ahead and make sure that
10:01 you click Save Changes and then those
10:04 will now be saved in your project now
10:07 another important note is that you have
10:09 to configure the domains that will work
10:11 for this particular project now you can
10:14 add as many domains as you want okay and
10:16 this will only work on those domains now
10:19 if you do want to make sure that the
10:21 fonts work inside rapidweaver you have
10:24 to make sure that you add local host as
10:26 a domain for this project now if we head
10:31 over to the tools section for your
10:33 project you will see that the first tab
10:35 here is called the CSS key okay you're
10:39 going to have to enter this into
10:40 rapidweaver into the font pro stack so
10:43 that everything works and ties
10:45 everything together for you so when we
10:47 jump into rapidweaver and i referenced
10:49 the CSS key for Hoffler you'll know that
10:52 this is exactly what i'm referring to
10:55 now once your project is finalized and
10:58 you want to move it into production
10:59 you're going to want to go to
11:01 development mode and then here you're
11:04 going to want to say publish this
11:05 project to my server
11:07 and you can say let's begin and what
11:11 you're going to want to do is you're
11:12 going to want to put in the URL to where
11:15 the font files that you're going to
11:17 download in a minute are going to be for
11:20 example let's say I wanted to load this
11:23 project on my font projo workman net web
11:26 site okay what I would do then is I
11:30 would create a fonts folder at the root
11:33 of the website I could then say generate
11:36 the web fonts for this then what's going
11:38 to happen is Hoffler is going to
11:42 generate a zip file forest that contains
11:44 a bunch of CSS and font files we simply
11:48 download this archive and then we need
11:52 to upload the folder that we just
11:54 downloaded to the folder that we
11:56 specified on the server and you're going
11:59 to do this with your favorite ftp
12:01 program okay and once you've done that
12:04 you're going to confirm the installation
12:05 now this project I just created for this
12:08 demo video so I'm not going to confirm
12:10 the installation but essentially that
12:13 zip file is a folder you simply upload
12:15 that folder to your server so that it is
12:17 resides at this exact URL once that
12:21 happens you can confirm the installation
12:22 and your project is ready to go into
12:26 production so here we are now inside
12:30 rapidweaver and i've added the font
12:32 family stack as well as a couple Hoffler
12:34 and co font child stacks ok let's go
12:38 through this first let's look at the
12:40 text that's going to be used for headers
12:41 i created a label so it's called headers
12:45 so i know that this particular font
12:46 family i am planning on using for my
12:48 headers now if you'll notice hoffler has
12:52 something a little bit different it has
12:53 font family name a and font family name
12:56 be if we go back to my project set up
13:00 inside Hoffler you'll see that for this
13:03 particular font there are two font
13:06 families here we have died at 24 a and
13:09 died at 24 be ok those are the exact
13:14 font family names that you're going to
13:16 have to put inside rapidweaver they need
13:20 to be exact
13:21 CLE the same so just copy and paste
13:23 these two font families into the font
13:26 family name definitions inside font pro
13:29 now further down we'll see that we have
13:31 our load CSS key and I mentioned this
13:34 earlier you're going to paste in that
13:36 CSS key from Hoffler into here now just
13:41 like Typekit and others we do have a
13:43 rocket loader option the rocket loader
13:45 for Hoffler though only supports
13:47 foundation so if you're not using
13:49 foundation you cannot use the rocket
13:51 loader and if you've already loaded this
13:54 particular CSS key you can say already
13:57 loaded now this could either be your
13:59 load unit via another Hoffler & Co stack
14:01 or you've manually enter this into your
14:04 site wide code options inside
14:06 rapidweaver you then define your default
14:11 wait for this as well as the default
14:13 style for this particular font I'm only
14:16 loading the 500 italic font so I want to
14:20 make sure that by default it's going to
14:23 set that font to be 500 weight and
14:25 italic then of course you set your
14:28 fallback font as well as apply it to
14:30 something right here for ease of sake or
14:33 I'm going to apply it to vault 1 now if
14:38 you see down here in the content I have
14:39 two headers i have um this that says
14:43 this is my header I then have a header
14:45 that says Hoffler and code if you notice
14:47 they are both assigned to font vault 1
14:49 now let's preview our page you might
14:53 notice that these look completely
14:55 different right they're both set to use
14:58 that font now why does this one on top
15:01 look so bad while this one down here
15:05 looks beautiful now if you notice here
15:09 the ease look correct but the rest of
15:13 the characters here are definitely not
15:16 my font why is that well if we look at
15:20 the project you remember earlier I
15:22 talked how we can define character sets
15:24 so I knew for this diet font that there
15:28 were only specific characters that I was
15:31 planning on using so here I put in all
15:34 the letters
15:35 that I knew I was going to use for this
15:37 particular typeface and that's exactly
15:41 what's happening only the letters that
15:45 show up here will actually be displayed
15:48 in that font on my webpage so if we head
15:52 back to rapidweaver you'll see that the
15:55 only letters that are common here are
15:57 the e so this is why this particular
16:00 header is not working but Hoffler and co
16:03 is because all of the characters here
16:06 are inside that character set that I
16:08 defined when I set up my project now if
16:12 we look at the second one this one's
16:13 gonna be pretty straightforward here
16:15 this is I'm going to be using for my
16:17 paragraph text and I defined my fault
16:21 family names again these are going to be
16:23 exact copies from my project from the
16:26 font family inside my project I've
16:28 already loaded my CSS key from another
16:31 stack so I'm going to set that to be
16:33 already loaded you define your default
16:35 wait so you're what your normal weight
16:37 is and then you define what your style
16:39 is so this paragraph text it's going to
16:41 be normal style okay and then you assign
16:45 it to your your vault and you're good to
16:47 go and if we preview our page again
16:49 you'll see that we definitely have
16:51 beautiful typography now that is coming
16:54 in from Hoffler encode and that's about
16:58 it everybody that is how to use Hoffler
17:01 & Co fonts in rapidweaver right using
17:04 font pro it's really simple right there
17:07 are a few gotchas in terms of making
17:09 sure we add those fonts to your library
17:11 right don't just go willy-nilly and
17:13 start adding fonts because olives and
17:14 you're going to run out but Hoffler
17:17 provides like I said beautiful
17:19 typography that's going to load
17:20 lightning fast on all your devices
17:22 because of their screen smart technology
17:25 right and of course their font selection
17:27 is beautiful some really internationally
17:30 famous fonts there so I hope you are
17:33 joining font pro um I hope that you're
17:36 using this to your best ability to make
17:38 your dip web designs even better and pop
17:40 because the typography here is amazing
17:44 so I hope you're enjoying it and thanks
17:47 for watching everyone
17:48 bye"}]