Transcript

00:00 Google Fonts is an amazing resource and
00:02 let's see how font Pro can make using
00:05 google fonts in a rack weaver projects
00:07 super easy hey everybody
00:17 Joe workman here and today I'm excited
00:19 to show you how to use font Pro to
00:22 manage google fonts now you may ask what
00:26 is google fonts well Google is providing
00:29 a great online service to serve up over
00:33 700 open-source fonts to us completely
00:37 free right so that is a lot of really
00:41 great top quality fonts that we can
00:44 leverage on our websites for free now
00:48 not all 700 fonts are equal right
00:52 designing a typeface is very complex
00:56 right it has to do with you know letter
00:59 spacing and when these two letters are
01:01 together how is the kerning work right
01:03 so not all fonts are created equal right
01:08 so which fonts do we want to use in
01:12 Google
01:13 well basically do your research right um
01:16 there's a lot of very smart people and
01:19 great typographers out there that have
01:21 analyzed the open source fonts on google
01:24 and told us basically here's the best
01:27 ones that we can do right and so we'll
01:30 look at some of those and dive into
01:32 actually how we can easily use google
01:36 fonts web interface as well as then take
01:39 that into font Pro and implement these
01:42 google fonts easily in our projects so
01:45 let's dive in so here is a blog article
01:49 on titles and type Wolff is a great
01:51 resource if you want to subscribe to the
01:53 blog and see all the great resources
01:55 that are available on this website
01:57 there's a lot but on this blog post that
02:00 I've linked to actually on the font Pro
02:02 website is a list of the 30 best google
02:07 fonts to use right so he's taken through
02:09 and he's gone through and analyzed all
02:12 of the fonts on
02:13 or probably most of them and he's given
02:16 his recommendation on what are the top
02:18 30 fonts that you should be using you
02:22 know from Google so this is a great
02:25 resource make sure that you check it out
02:27 and take it to heart so here we are on
02:31 the Google Fonts website simply
02:32 google.com slash fonts and when you
02:36 first load the page you'll notice that
02:37 there are a ton of fonts that you can
02:39 see right now it's great is you can
02:42 actually customize the sentence that is
02:45 here so let's go ahead and quickly do
02:46 that there we go much better so as you
02:50 see here we can see a whole bunch of
02:53 fonts the first one here is open sans
02:55 and we have Roboto and slab and Lotto
02:58 and oswald right so you see you can just
03:01 peruse these fonts and go all the way
03:03 down okay you can also sort by word
03:07 right so if you want to see them maybe a
03:09 little bit larger kind of in a header
03:11 sized font right this is another way of
03:13 perusing these things you can customize
03:16 also the font size that's being used and
03:18 then you can also see paragraphs so how
03:20 is this font gonna look in paragraph
03:22 form okay there's also poster which is
03:25 kind of like the name of the font as a
03:27 you know a large header as well okay
03:29 kind of similar to what we see here in
03:32 the word ability so once we find a font
03:38 that we like let's say Roboto okay I can
03:41 go ahead and go to the pop-out of this
03:45 and this allows us to maybe see that
03:50 font a little bit more in depth
03:52 so in this font we can see all the
03:55 various font weights the italic versions
03:58 of the font okay and what's important
04:00 here is that when you use a font you do
04:03 not get all of these weights and styles
04:08 out of the box okay each one of these is
04:11 its own separate font file that gets
04:14 downloaded so if you want to use normal
04:16 400 plus 500 plus 100 right I mean this
04:21 is all three different font files that
04:22 are going to be loaded so find the font
04:25 that you want and choose
04:26 the weights that you're gonna going to
04:28 need and then you can utilize those now
04:33 on stats you can see how many people are
04:35 on the world are actually using this
04:37 fonts right um and then also pairings is
04:40 great this gives you suggested pairings
04:43 on other fonts that will complement this
04:46 one for example
04:48 I think Roboto would make a great a
04:50 header font so if I move a little bit
04:53 further down we can see what other fonts
04:57 they're actually recommending to be used
05:00 with Roboto so you can really find a
05:03 nice contrasting header and body text
05:05 font now what you also notice is if we
05:09 search for Roboto on here there are many
05:12 different types of Roboto fonts ok we
05:16 have Roboto Roboto slab Roboto condensed
05:19 Roboto mono okay and these are all
05:22 slightly different fonts right now just
05:25 a quick little break out because you
05:27 probably heard a lot of terms like sans
05:29 serif font serif font mono spaced font
05:33 like what are all these things right so
05:37 let's just go over a little bit right if
05:40 you notice a lot of fonts have like
05:43 little what are called serifs little you
05:46 know accents that come out from the
05:48 letter right such as the font that we're
05:51 seeing gonna see right now is Roboto
05:53 slab so Roboto slab if you see has
05:56 little serifs that come out from it that
05:59 means it is a serif font because it has
06:01 little accents that come out from the
06:03 back of the peas or the DS or the ends
06:06 right they have like you know it's kind
06:08 of like some people might call it like a
06:11 Roman character right where they're
06:12 there they have like feet right or you
06:15 know accents that come out from the top
06:17 and the sides right those are serifs so
06:20 if you have a font that has these serifs
06:22 it is called a serif font now a sans
06:27 serif font means something that doesn't
06:30 have a serif so it is something like
06:34 Helvetica Helvetica new right or you
06:37 know fonts that are just straight
06:39 right and they're just cut off there's
06:41 no fancy foot feet on the letters right
06:43 um they're very clean and modern a lot
06:47 of modern looking texts and things like
06:50 that uses a sans-serif font because it's
06:54 just straight sleek and modern
06:56 there's no serifs involved so sans-serif
06:59 is not cereth right um and then you
07:03 might hear Manos based now traditionally
07:06 a lot of quality fonts right um
07:10 depending on the letter okay the width
07:13 of the actual letter could be different
07:15 right so an eye and a W are gonna have
07:19 much different spacing the amount of
07:21 space the letter is going to take up
07:23 however a monospace font such as courier
07:28 okay that is a mono spaced font and what
07:32 that means is every single letter takes
07:35 up the same amount of space okay
07:38 so depending on design normally mono
07:41 sweets spaced fonts aren't really used
07:43 online okay but just want to make sure
07:45 you knew what the terms were and
07:46 especially San serif versus serif right
07:50 those are gonna be big differences
07:51 especially we need to find a fallback
07:53 okay so let's head back to google fonts
07:57 so let's say I wanted to use Roboto slab
07:59 as a header font I can go ahead and say
08:03 add to collection and let's say let's
08:07 find another font that we think might
08:08 look good as a body text with Roboto
08:13 slab has the header text let's go ahead
08:15 and click the pop-out and let's go over
08:17 to pairings and we can quickly scroll
08:20 down and we see Roboto condensed right I
08:24 see this one's nice source sans pro so
08:28 we can go ahead and let's go ahead and
08:29 and add source sans pro on to our font
08:33 collection as well let's go ahead and
08:36 search for source sans pro so here we
08:40 have source code pro source sans Pro
08:42 here we go so let's go ahead and add
08:44 that to my collection now at the bottom
08:46 you'll notice that I've added two fonts
08:47 to my collection and those are the let's
08:50 say those are the only two fonts that
08:51 I'm really going to want let's go ahead
08:52 and
08:53 review these fonts so I go ahead and at
08:56 the bottom here I click the review tab
08:58 and this brings up an interface where it
09:01 allows me to review the fonts that I've
09:04 chosen
09:05 so here it's saying here's Roboto slab
09:08 as my headline font okay and then you
09:10 can change maybe you want it thinner
09:12 right or you know normal or maybe go a
09:16 little bit bolder okay let's keep it at
09:18 400 okay and then we could see here's my
09:21 what source sans pro looks like has a
09:24 paragraph font and then you know we can
09:26 experiment with different weights over
09:28 here this is a great interface to kind
09:31 of see how your fonts are going to look
09:34 decent together now if you look at the
09:38 top there's other things that we can do
09:39 we can go to styles and we can you know
09:41 if we want to select more than one
09:42 weight we can do that
09:44 we can test drive this where it actually
09:46 put in the content together so we see
09:49 exactly what a Roboto slab header is
09:52 going to look like along with the source
09:57 sans pro body text so now that we've
10:00 picked what fonts we want to use let's
10:02 go ahead and dive into rapidweaver and
10:05 see how we can add these google fonts to
10:08 font Pro so here I have a sample page is
10:11 just simple it has a header and a
10:13 paragraph and the font family stack at
10:16 the top now first off let's go ahead and
10:18 add a Google font and let's categorize
10:24 this for our headers okay so this
10:28 particular font family is going to be
10:29 for our headers now the family name
10:35 remember we wanted to use Roboto slab
10:39 now this is a very very important part
10:43 of setting up your google fonts inside
10:46 font Pro if we quickly zip back to the
10:49 google fonts site we have to ensure that
10:52 the font family name that we enter in
10:56 the rapidweaver matches exactly with
10:59 what is in google fonts so here we have
11:03 Roboto slab with capital R space capital
11:07 s all of that matters if you have a case
11:11 wrong or you delete a space or you have
11:14 an extra space okay it is very important
11:17 that it be exact
11:18 so here we are back in our Google font
11:21 stack and we wanted to add Roboto slab
11:23 again I added this exactly as it shows
11:26 up in the Google Fonts website so next
11:30 up in the Google font setup is we're
11:32 gonna want to make sure that we define
11:34 the actual font weight that we wanted to
11:36 use remember earlier we said we were
11:38 gonna use 400 but if I wanted to use 700
11:41 or 800 or so on and so forth I could
11:44 choose the exact weight that I would
11:46 want that I would like to use for this
11:48 header and then we'll look at what bold
11:53 italic and bold italic will do for us
11:55 when we set up our paragraph texts okay
11:58 now our fallback font remember Roboto
12:02 slab is a serif font so what we're gonna
12:06 want to do is we're gonna want to set
12:07 the fallback font to be a serif font
12:12 next up we want to apply this font
12:14 family to something and for simplicity
12:18 here we're just gonna set up a vault
12:20 okay and what you know is when you set
12:23 up a vault
12:24 there is a remove this little warning
12:26 sign that shows up in your font family
12:28 set up this warning sign says hey this
12:31 font family is not being applied to
12:34 anything so once you apply it to
12:37 something whether it be any of these
12:39 apply to settings that warning will be
12:41 gone but right now I like I said we're
12:44 gonna apply this to a vault let's apply
12:46 it to vault number one now next part is
12:49 we want to apply this font family to our
12:51 header right so if I go to my header
12:54 stack this is my foundation header stack
12:55 I can go ahead and I've already set the
12:58 font to be font vault one now how do we
13:01 make sure that this is working what we
13:04 can do is inside edit mode there is a
13:06 preview font button and if you check
13:09 that you will notice that the actual
13:12 headers for both the header as well as
13:14 inside the Google font stack have
13:17 changed so the the you actually get to
13:19 preview the font being
13:20 used now I don't recommend that for
13:23 Google Fonts you leave this on because
13:26 it will cause jumpiness inside edit mode
13:28 so just use it to make sure that your
13:30 font is actually working and then you
13:32 can quickly turn that back off now let's
13:35 set up our paragraph so I'm going to go
13:37 ahead and add another google font stack
13:39 to the page we're gonna change our label
13:41 it is four paragraphs okay and remember
13:45 our font family is source sans pro and
13:47 then we want to make sure that form
13:50 normal the normal font is going to be
13:51 400 weight and then we also want to load
13:55 let's say for example the bold font I
13:57 want to make sure bold loads 700 which
14:00 is the normal weight for a bold font and
14:03 then we also want to bring in the italic
14:05 and the bold italic now remember as I
14:08 told you earlier every single weight and
14:11 style that you add to the page of a
14:14 particular font will load a separate
14:16 font file so if we look at google fonts
14:20 at source sans pro i want to load four
14:22 hundred four hundred italic seven
14:26 hundred which is bold and seven hundred
14:28 italic now what's great about this tool
14:33 is that if you look at the little gauge
14:37 here that google provides it kind of
14:39 gives you a little hint
14:40 in terms of how performant is this font
14:43 on your website so you see as i checked
14:46 more of these fonts the little gauge
14:48 here went from green up close to the
14:51 warning right so make sure that you
14:54 check these gauges in google fonts so
14:58 you could potentially see how much a
15:00 font is gonna add to your page weight so
15:04 now that we defined that we want to load
15:05 all four of our our typefaces for these
15:08 sans say for the source sans pro font
15:10 let's go ahead and add that to vault
15:12 number two okay and of course in my
15:16 paragraph stack this is a foundation
15:18 paragraph stack i have assigned the
15:20 thought to be fought vault to okay so
15:24 technically we're done right i've now
15:27 imported my fonts from google and i've
15:30 applied them to a vault which i've been
15:33 utilized inside of my
15:34 contents tax now if we preview the page
15:37 we'll see all of our fonts are
15:39 beautifully getting used now you might
15:43 be wondering why on earth would I want
15:46 to add italic or bold italic or even
15:50 bold weight to my paragraph text or to
15:54 my font families okay because I'm
15:56 loading now four different typefaces so
15:59 if we look at this particular paragraph
16:01 here you'll see that most of the
16:03 paragraph is normal text we then have
16:06 this little section here that is italic
16:09 and then we have a bold section over
16:12 here and then we have a section of bold
16:15 italic words as well if I didn't load
16:20 the italic font I'm gonna go ahead and
16:23 quickly turn off the italic font loading
16:26 here what you've probably noticed is the
16:29 look of the text has changed the reason
16:33 for this is that what the browser is
16:36 doing is it's taking our normal weight
16:39 font and just skewing it prop a little
16:44 bit to the side to make it look as if
16:46 it's italic this is what we call faux
16:48 rendering okay and if you want to ensure
16:51 that your fonts are being rendered in
16:54 the best possible most sharp way
16:56 possible you want to ensure that you're
16:59 loading all of the typefaces required
17:01 that you're gonna use so if we head back
17:04 and look at these source sans profiles
17:06 something that you will notice okay if
17:09 we look at the normal font and the
17:12 normal italic font just take a look at
17:15 the characters one thing that may or may
17:17 not strike you is that the a is
17:21 different in the italic font the font
17:25 designer for this particular font
17:27 decided that this style of a potentially
17:31 looked better in italic as well as made
17:33 the text when it's italic also stand out
17:35 and looked a little bit different than
17:38 the normal weight font or the non italic
17:41 typeface so here we are again with that
17:45 same font and it's doing foe rendering
17:47 its take
17:48 normal typeface and just simply faux
17:51 rendering it to look italic but if we
17:54 enable italics again what you'll notice
17:57 is is now using the italic typeface for
18:01 source sans Pro and for word analyzed
18:04 the other differences such as you know
18:06 faux rendering of bold fonts and faux
18:09 rendering of bold italic fonts the same
18:12 thing will happen if you want your text
18:15 to be as crisp and clear as possible to
18:18 read and you're sure you're gonna use
18:20 italic or you're sure you're gonna be
18:21 using bold in your in your content and
18:24 sure and make sure that you load the
18:27 correct typefaces so that does it for
18:29 google fonts right we went over quite a
18:32 bit in this video and now I didn't go
18:34 over every nook and cranny of the google
18:36 fonts interface right um there's a lot
18:39 of things that you can do with it
18:40 play around with it become a little
18:43 expert on it if you're gonna use it a
18:44 lot right there's also some integration
18:47 with an interesting service called
18:48 typecast that hopefully I'll do a video
18:50 on in the future okay but Google Fonts
18:54 is a powerful tool that allows us access
18:56 to hundreds of professional open-source
18:59 fonts now again be choosy about your
19:03 fonts not all fonts are created equal
19:06 now as you see google fonts is a great
19:08 place to start with using online web
19:11 fonts because it doesn't require that
19:13 you really do much work other than
19:15 learning the google fonts interface
19:18 copying the font family name and pasting
19:21 it into font Pro and font Pro does all
19:23 the rest of the work for you
19:25 okay now remember the intricacies of
19:28 loading what typeface right so choosing
19:31 the exact font weights that you're gonna
19:33 need okay are you gonna need italic are
19:35 you gonna need bold italic if you want
19:37 to ensure that your typeface is load
19:39 properly you're gonna have to make sure
19:40 that you do that so I hope that you
19:43 enjoy google fonts in font Pro and use
19:47 them to really make your websites pop
19:49 with beautiful crisp sharp text so thank
19:52 you very much everybody
19:53 take care bye"}]