February 5, 2020 0

Google Fonts with HTML and CSS 2016


Well, it’s time to get a little more exciting with our font choices — because, remember, when you are specifying fonts in your HTML and CSS, you need to be mindful of the fonts that most people have installed on their computers. Even if you have hundreds of fonts on your computer, most people won’t have all the same ones. There are differences between Windows and Mac. There are differences between older and newer operating systems. So you can’t just specify any font and expect people to see the same thing that you see. But with Google fonts, because they’re on the web — they download to your page when somebody opens your page. Google fonts are not dependent on the user’s own computer, so we get more choices to use some interesting and unusual fonts. So, to demonstrate how we use Google fonts, I’m going to use a page similar to one we used in a previous video. It’s only got two different font families on it. The paragraphs have one font family specified, or a particular type, that’s easy to read at a small size. And the headings — there’s one H1 and there are two H2 headings. All the headings are a different font, and you can probably see that, just by glancing at it. If you think of the difference between serif and sans-serif — which is covered in the book — you can see, probably, that the headings are sans-serif. They don’t have serifs. And the paragraph text is serif. So here’s our htML. We only have one style sheet attached. Which is what you’re used to up until now. And as I said, it’s a similar page to one you saw in a previous video — nothing fancy here. The text is wrapped up in a container DIV from top to bottom, which allows us to make the whole block more narrow and put a thin border around it. The CSS is also similar to a previous one, and you see that we have specified a “generic” font-family in the head — just one font-family, and it is the generic “serif.” And for the headings, both H1 and H2, we have specified the generic “sans-serif.” So the first change I’m going to make is I am going to add a named font that is very common on both Windows and Mac and It’s going to be a serif font. It’s name is Cambria capital C comma after it and of course I keep the generic because if somebody doesn’t have Cambria their browser will default to the right So it will load serif instead if they don’t have cambria [and] then down for my headings. [I] am going to add Calabria Calabria Capital C comma which is a sans serif font [so] my generic makes sense My named font is [sans] serif and if they don’t have that it’ll default down to Sans-serif so I’ll save this and when I go to the page pause for a moment and look at this and then when I reload Keep your eye on the text and see the differences Okay, so it’s not a gigantic difference And that’s good because I’ve matched my generic what we saw previously To the kind of font family that I want to appear if people have that fun, so what about the Google fonts? So when we first go to the Google fonts page online, [and] it looks like this And we’ve actually got a lot of funds About 800 fonts are available now. They add more every year and How are you going to look at 800 fonts, right? You can browse a little bit you might see something you like right away But a really good way to get started is for example if you know that you want a headline font You can make sure that this option is clicked display And say you definitely want your headline font to be sans-serif. Well you can uncheck serif and You don’t want it to look like handwriting [and] you don’t want it to look like a typewriter [mono] space right so you can unselect that and then you’ve got your number of fonts down to almost 500 out of 800 so Sort of a headline font. There’s about 500 of those and I’ll just scroll a little bit till I see something I like and Let’s say when my eye falls on as [walled]. It’s exactly what I want now Let’s see some options that are available to [us] these options are [available] on each font when we roll over the font itself so for us [wold] I Could look at it. I could look at the whole alphabet for the font and I could increase the font size so I could see how is it going to look when it’s big? whoops maybe we don’t want to see it that small and I could look at only the numerals in the font What are my other options I could look at it as a paragraph this doesn’t look great as a paragraph Especially not if we were going to go down to a readable size maybe for advertising It’s really a display font So back to the sentence so let’s say that I’ve decided that I really like Oswald and I’m going to choose this as one of my two fonts for this assignment or for this web page or web site that I’m making so there’s a plus sign on every font and I’m going to click it and As soon as you click the plus sign you see something that was not there before There’s this black bar at the bottom of your screen since we’ve only selected one font family it says one family selected and There’s actually a lot [of] other things on this panel So when you click the minus sign on [the] right hand side it opens up and we’re going to talk about that a little bit later, [so] I’m going to close it for now. So now need to find my second font and Since the instructions say this one has to be opposite of the one we’ve already picked so that one was Sam serif, and so we need to pick a serif and Because this is going to be the paragraph font or the main text font [it] should not be a display font right display means headline and so if I Unselect well now I actually get the [number] of fonts down to around 170 so it’s fewer and I’m going to just scroll around and just look for [something] that [catches] my eye [that] [I] think would look nice as My paragraph font and I see this one called Arvo So I could look at a few of the things like how does it look in a paragraph How does it look if I make it a little smaller? yeah around there right [looks] very readable, so I’m going to hit the plus sign again and Then what we’ve got is we have two families selected so I’ve got my two font families done and selected and I go down to the black bar [at] the bottom which you saw before and I open it up And this is how we’re going to get the code that we need to incorporate these Google fonts into our web pages So I’d like to show you what is on the customize tab here on this screen this pop up that shows us our selected font families, so if you click customize You will see that you can choose some other styles for each of the families now Not all font families have this option some have many more some have no extras But what will happen I want you to first look at load time, okay? Always pay attention To this button here which [right] now says fast meaning these fonts will load quickly so if I start selecting all the fonts, I’m Sorry all the styles for the fonts [I] end up with a very low load time because I’ve got a load Instead of loading – I’m basically loading seven entire Copies of the fonts, so in most cases. I would say that we do not load all the fonts all the styles sorry I keep saying [that] and We just go we just go with the defaults that were there when we opened it up and especially when they say fast All right, so to continue. We [need] to remember to go back to the embed button because on the Embed Tab [that] is where we’re going to find our code So have a look here the code for both of the fonts that you have selected for both families The code that you will put in the head of your htML Is right here with? Standard selected do not go to import Standard standard is correct all right. So you’re just going to select and do a copy and Then you’re going to paste into your htML Document within the Head Element and where are you going to put it you need to paste this into the proper place? You want to put it above the stylesheet you already have? So I’m going to paste it right here So that you can see what it looks like so this link tag and everything in it was created by Google fonts because of what you put into your collection it’s Got Oswald and Arvo and The punctuation and that vertical bar which is called a pipe that stuff is all Absolutely necessary don’t change anything in here Because if you do the fonts won’t download so this link tag will send a request to Google Server when this page loads And then the fonts will download and that’s why we paid attention to the load time We don’t want them to take too long to download How are you going to add these two funds into your cSS well You are going to come down to this part This is where you’re going to get the correct way to write the name of the Google font into your cSs not into the hTML, but into your cSs font family Property Declaration [all] right, so you can see that here is oswald and here is Arvo and So for each [of] those perhaps, they’re short enough that you could type them correctly, but [if] you want to be perfect Maybe you actually want to Copy and paste so that you don’t make any mistakes So we’re going to add that in now I’m going to make sure that [I] save my htML, and I’m going to go over here and Let’s see so my serif font For the paragraphs is cambria and the new one I picked is arvo Okay, and like I said [Google] [fonts] wants you to put quotes around it like this, but when it’s one word You don’t need to so I’m going to take those off and then my other font family I only have two that’s where I’m going to use oswald because oswald is the San serif font [alright], so I am going to save and then I’m going to go to My page and so sort of stare at the middle of the page and watch for when it changes. I’m about to reload it and These are my new Google fonts now. Keep in [mind] that if you are not online The Google Fonts won’t download So say you’re riding on the bus and you pick up [your] laptop and you open up this page? It’s going to look the way it looked a second ago because these Google fonts will not load when you’re not connected to the internet, but The next font to the right in your cSS Will load, so you would see cambria you would see Calabria, and it would still look all right Now I’m going to pop [back] over to Google fonts, and I’m going to show you how to to search for a font family by name and also how to Delete fonts that you may have already selected because remember you usually do not want to use More than two font families per page or even per website right you don’t want to overload Your page and make it heavy and slow to load with too many fonts So I had earlier seen a font that. I liked called Cherry cream, Soda and all I have to type in there is cherry and it pops up and I think that this is going to be a really nice headline font to use instead of instead of what I had before, [so] I’m going to add it and Then I’m going in if we open up our menu. We can see that now I have cherry cream soda and I’m actually not going to keep parvo and [Aswad] so I can Get rid of them just by [clicking] that minus [sign]. That’s beside their name [I] want to add one other font that I know the name of So I’m going to search for that one. It’s called gentium basic Not gentium book basic, but I’m going to pick this one gentium basic, and I’m going to add it and then [I] can do the same things that I did [before] I check my load time, and I say great. It’s nice and fast I Can look at the styles available to me if I want to? Go back to Em bed, then I’m going to get my link element for my hTML document copy that and also, I’m going to get my font family names the way they need to appear in my cSS file and Note the way they are written here, and we’re going to look at that when I paste them in to the cSS first I’m going to get Rid of The old Google fonts, I don’t want them all to load. I’m going to use different ones now So don’t overload your fonts only call the ones that you really are using in this page So I put my new fonts in there Something I wanted to show you is that? When a font name has more than one word in its name in the link tag in your htML Document you’re going [to] see these plus signs so here I chose two fonts each one has more than one word So one font is named Cherry cream, Soda [the] other font is called Gentium basic, so you see how this came into my htML but how am I going to style these in my cSS file and Remember that Google Google fonts tells you right they will show you right down here and notice that the plus signs are never used in your cSS and because these font names have more than one word you must put quotation marks around them now you can use single quotes as Google does or double quotes like I prefer doesn’t matter go into my cSS and Here instead of arvo. We are going to use gentium basic and Remember if you spell this wrong that font will not load you have to be Perfect in your spelling notice also that the comma has to come outside The quotation marks again you put that comma inside that font is probably not going to load so you wouldn’t see it So I’m going to get rid of [Oswald]. I don’t need that anymore. I’m not using that one Cherry cream soda And a comma after it right all the font names have to be separated by commas so I will save and When I reload this time it should look significantly different Because that cherry cream soda font that I use for my headings. That is a pretty different looking [fun] So we’re done with Google fonts I hope you know how [to] use them now look carefully at this and make sure that you do the correct thing [in] the head area of your hTML and the different correct thing in your cSS document Don’t get confused never use more fonts than you need because [it’ll] make the download longer that would be bad for your users

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2019. Amrab Angladeshi. Designed by Space-Themes.com.