Lessons

Lesson Info

Using & Adding Hosted Fonts

Let's, shift gears a little bit here, we're going to talk about using what is called hosted funds, these air, these air huge and something every wants to do, and I just want to kind of show you a few examples of hosted fonts and what what kind of talking about once again, a lot of these these links are in that pdf of links that you've got google fonts are huge, google finds something that we can use in our sight, that air hosted by google, that we'd basically just have to kind of linked to them and then say, in our pages, used to google fun here. All right, this this is it's, not that hard really isn't, um, but google host them, so we have to worry about it, so hosted fun essentially means that we're using they're fun that's on probably another server or some other machine. When somebody goes to look at the site, we say, use that google fund, it goes to the google machine copies it temporarily, brings it down and place it on the page or puts it in the page. There's, google fonts, there...

's a million things out there type kit if you are a creative club subscriber, you're probably familiar with type kit because we created cloud, we get the type, get fonts and all that kind of stuff if you are a creative klaus describe er you also have access to type kit, which means you can sign in with your adobe idea and we can use these honor wordpress site this is really cool. They even have instructions on how to do it up there. We're going to keep it a little simple right now just you least use google funds, so I want to start there. I'm gonna go back over to my page and yes, we are going to use a plug in, okay if you wanted to go through the pain of trying to plug all that stuff in yourself it's not that bad, but there are a ton of plug ins out there you can use that make it easier. I'm gonna go up here to plug ins and click on add new and I'll go to search plug ins and I'll do something like search for if you want there's a lot of like type dot com and google finds and type kid and there's a million out there you can use you'll see that there's one up here called easy google fonts and this is a pretty good one you can use and I just want to make sure I'm actually using the right one here easy goober funds yeah that's it we also have w p google fonts you've got to kind of look at it and say, well, this one's not updated this one is so I'm gonna use this one this was actually pretty powerful how many install this one once again I'm looking at everything, making sure it's all in line with what I want I'll install it and go on sale it's activated and once again this is going to go in and say, all right, let's, get this thing going, you're going to see now easy google funds, but one of the reasons why I'm also showing you this is because there are themes that have this particular plug in or exactly what this plugging does built into it, so I'm gonna kind of show you how it works, how they how they actually do it once you activate the easy group of funds are going to see how easy this is that's why they call it easy, I'll come up and I'm gonna goto appearance and you going to see customized this's are these air customizer settings? So click on customizer and go take a look and suddenly you're going to see typography. This is pretty amazing how many click on typography nose works for just about everything you have, so I click on typography and by the way, if you have a theme that already has this built in, you want to check that first, okay because it might already have that typography in there and you're going to see the exact same thing and if you install the plug in is just doing double work so we don't need that what's great about this is that it's going to take the google live library the google library rather the fonts library and attach it to your page and instead of us having to go to the css and kind of hand caught a lot of this stuff which we could do it's going to do it right here so I click on default typography and it's just going to say all right what you want I got my paragraphs for instance and I click out of thought and I can go to town I can say all right let's just pick a font family and it's going to show you everything pretty much like from google serif toe ant you know sand saref and if you notice check this out soon as I pick at it updates so I can say let's try like bree serif that kind of thing and usually in the customizer it will do that pretty simply a b c it's kind of a nice one you pick a font you go you've done okay this is what's great about this one now a couple things about this plug in that I do need to mention though that you do not want to use okay if you look right here, you're going to see that every time you go to edit of fun being for p paragraphs headings whatever you're going to be right here if I click on appearance, you'll see that we have what's called font size line heightened letter spacing okay, this is really cool I'm looking at it I'm like wow look at all the stuff I can do this is so amazing one of the problems I'm running into though with a plug in like this is if I go in and set this font size I'm like check check this out look look how easy this is I'm just going to slide I'm like a that looks pretty good okay? I know somewhere hating the fun that's too bad but that looks pretty dead. Okay, what I'm gonna do is I'm gonna go save him publish looks pretty neat I want to go out to my website and all the hair now this is every paragraph on every page is now going to be affected. You can see there it is awesome this is live, but if you take a look you're going to see that when I go to scale things do you notice how with responsive a lot of times we have heading subheading his things like that they will actually change font size depending on the device iran we're not gonna have our h ones that are this big on desktop be that big a mobile obviously so they scale with this plug in what actually happens let me move this saddle of it I'm not saying don't use a plug in I think it's a great plug in for the funds but you've got to be careful because if I go and click on let's say that p here now what I just did you guys you want to right click or go to the inspector you want to get the developer tools open okay inspect element it's going to try and expect something if I click on that pee right there and take a look you're going to see that we've got all the different formatting over here etcetera font cetera blah ball ball you're going to see that it says fun feature setting it's trying to use a far from before lake legal or something to that effect what this plug in actually does let me go to the code I'll say you know something you don't want to look at that but I will paige source so what I'm gonna do is do a quick search for that fun okay, check this out if you look this plug in our styles for our child her up here okay, I go down here and look this plug in added this in the head he's going to override your style so if you pick a single font size it's going to stay that way from mobile for desktop for tablet okay, just something to be aware of this is why it's doing it this is why it suddenly will just kind of nuke your other styles your other settings rather and this is this is pretty typical I'm not saying it's bad just be careful okay, so what I tend to do for this plug in especially I use it for a lot of features are you for like colors and you know the font itself and stuff like that that's not going to maybe change across the responsive spectrum but for things like fons et cetera trying notto try to be very careful. Okay, so this is this is a great great plugging for you to use you can also if you want to let me close this up there are settings for this. So if I go to settings out here and go to google fonts you can if you want to create what's called a font control I'm not going to get crazy with this. I just want to point this out. Ah, font control essentially says that we can go in and suppose that we want one part of our page like a certain heading somewhere we want that one heading tto look different than the rest we can create what's called a font control and we could create a style that we assigned to that heading and this allows me to pick a font through the google through google so I can assign it to like one part of my page if I want to do that if I have a fun control something like this I say like, you know, header h one or something like that is a control name and I say I let's add it now the name right here means nothing it's just give me a description if I go in and watch if I go to my page here and let's say I look right up here and I'm like, oh, this right here I want to be different, okay? I'm gonna go inspect it real quick and take a look at it and you're going to see that that's just in each one tag if I go to my code and I added class today each one I can then use that google fonts to just pinpoint the one heading that's what is trying to let you do? Okay, so in this case what's going to happen here is I need to actually tell it what css selector could be an idea could be a class, but I would do something like this I'd say like, you know, banner dates one is a class I would then have to go to my code my header and actually change that h one to have a class called banner each one gets a little bit deep a little confusing. Okay, but this is just just know that this plug and gives you a method for just diving in tow. One specific thing or one feature that you can add it so it gets a little it gets a little crazy, gets a little crazy in there, but I'll see the fun control it doesn't really matter it's not gonna affect anything right now. It's a matter of fact, if you want to use it, you have to go back if you see right here and now it's finally there but I have to get a customizer taxi at it the appearance so if I got a customizer and take a look, go back to typography you're now going to see we have what's called theme typography you now have that header h one you can add it so we're diving in the one thing we're just affecting one thing this is still not going to work, okay, the catch here, I'll pick a fun family, I'd be like that's, his impact I have to apply the class to that object and that's where you gotta go find it okay, you got to dig in the theme files you got to figure out where that thing is located isn't in the header is that this is that and figure out how it works, okay t to be frank, this is actually in the functions file and it's pulling fromthe customizer so you could have a little hard time finding just to beyond started so that's that's another thing we could do as faras like google working with google fonts quick easy method for playing google fronts um if you want if you guys if you want to type kate you can do that too there's a lot of ways to get that to work. I would actually go to the type kit dot com website. You could also just search type kit and wordpress together and they give you the options that howto work with it how to use it. There are type kit plug ins, forward press you can use that ally to use the type that fonts and that's something you can try to sew hosted fonts, google fonts, great plugin resource something we can attach pretty easily. The last thing I wanna do is I want to talk to you about fun icons fun icons are kind of interesting because when we talk about response of these days we talk about making everything kind of conform or look good in the different devices right in the past if you marry fact look at the typed page here okay if you look at the menu here, you're going to see these three lines if you look at the sign and you're going to see that little person, you're going to see the adobe logo in the past what we used to do is we used to actually save those is like gifts or pings stick him in there somehow get tricky to get it done but if if the icon or that image was really big on desktop we had to somehow make it scale on mobile and it was a picture so it looked like garbage when it got smaller ok these days what a lot of us are doing is we're actually using what is called icon fonts or spg as veggie is scaleable vector graphics and we're going to get that into that in the next section after this but we're going to talk about I conference right now what is an icon front that's what I want to start with let me take a look at my side I mean and actually this is this is awesome this just shows how much it's like the whole cobbler with his, you know, choose thing and the kids and all that stuff look at the latest tweet here my wordpress theme is broken because I just updated word press and I didn't check my tweet plug in and it's not working so shame on brain but here you go. Look up here in the past what we used to do is we used to actually take these and make him a little pictures. Now this is actually what's called icon fun so if I were to go look at that and look at it in the actual developer tools it would be a font that we pulled in. So the fun if you think about it is text sent essentially something it's tax that could be scaled and it still looks awesome. So to show you this once again, a lot of these these links are in that pdf of links that you have of this css tricks here css tricks is a great website. I love it, it's a great resource. You're going to see why I come for icon fonts are awesome and I love this these air actually, this is taxed you guys, these air text with a font applied and the font just as little pictures and basically and picked by pictures I mean their funds you can go in and do things like this because it's a fun I can change the size really quickly because it's a font I can easily change the color I can do things like at a shadow I could do all kinds of cool stuff and because it's a fun it's scaleable, it looks pretty good on most screens that some people will argue that and I can't sponsor not being used as much as they were, but they're still being used. So if we want to use an icon fop a couple ways, we can do it first of all, once again, this is a link that you have in your sheet. This is called font awesome there's a lot of icon fund companies or, you know, resource is out there that you can use and what they do is they give you the font file and they say, here, just put it on your site linked to it, and then just say let's, go grab the icon and you just put in the icon and you've got it, which is pretty cool. Wordpress actually has some built in already where press has what's called dash icons and this is kind of ah hidden little secret once again, this is earl it's in the pdf. We'll see right here. Developer resource is dash icons. There are this many icons in wordpress by default. So we have a lot of social media icons, different things like that we can use, the thing is, we actually have to turn them on. Okay, now, that's the that's, the kicker. How do we do that? We need a little bit of code. Ok, so to turn these dash icons and this is gonna be your maybe your first foray into working with icons. If I go back over to my admin over here, I'm gonna go to the editor and take a look at the files. And if I take a look up there on the right, you're going to see we have what's called the theme functions. This is something that we're going to need. So I'm gonna click on theme functions for my child. This is function stop php and we can go in and edit this. I've got a little code I gave you and I'm gonna show it to you real quick if you want to. You can open this up in some kind of little text editor go into the actual the the files that we have the bonus files we've got and you'll see that we've got in here. We're going to see I have what's called dash icons dot php and ive dash. I can't start css. Open up that little php file you could do this and dreamweaver, you can do it just a lot of text out of theirs doesn't matter. And what we need to do is if we just take this code, copy it and put it into our functions. Dot php file. We then have access to the dash icons and we could use them in our pages. You can use them for all sorts of stuff. You just you don't need to really mess with anything else. You can just copy this stuff. Go back over to your admin, go and make sure that you clear a little space and put it before the closing php there the ending php and just pasted in there. There we go. Okay, so what it's gonna do is it's going to go out and from the word press files, install it's gonna grab this little css file that has these dash icons? Then I could go update file. Now we can do is we're going to start to use him. So if I go over nowthe way that we actually used these kind of interesting, I'm gonna go back to that dash icon sight. You're going to need to have this open. Okay, you're going to see that we have what's called. Copy css and copy. Html. Well, we just did was we just attached the style sheet to the page to the to the theme? Okay, now we need to do is we need to actually take some html and put it on the page with the icons gonna go and create a little bit of css to get it to actually work to show it up haven't show up so what I'm gonna do is copy css you'll see content now it's going to grab the icon you see, I really don't want to hurt. Okay, so what I'll do excuse me is you can filter if you want or like I'm on a world I'll click on the world and say, ok, there's the world I'll go in and say let's, copy the css you're going to see this right here this content I'm going to go in, actually copy that, okay? And you click okay, you're gonna need to scroll all the way down on this page and you're going to see this code right here. This is cs es. This is the css we need along with what you just copied to get this to work. So first thing I'm gonna do is I'm gonna go back over. I just copied that csf from there go back over now we don't need to be in our functions file, this is css, we need to be in our style sheet, so go back over today style she filed for my child and I'll come in there you guys what I do this a lot I'll just kind of pace what I have said not to copy it again I'm gonna pace that stuff just in there somewhere that's not finished yet we're just kind of start ng I'll go back over to that dash icons and now we need all this okay so I'm gonna copy this and go back and after that I'm gonna paste it in now here's the catch what we need to do last up here for we put it in the page this content equals needs to replace this when I hear this little code is what tells it which icon to use that's essentially what it does so I am going to cut this out of here and replace that one I'll just paste it in there you guys could just typed in the number two okay it's your call I'm going to see my icon before what we now need to do is we now do you need to insert it into the page so I'm gonna go over to one of my pages after I say that somebody go ahead and update the file now the css right here says my icon if we want to we can change that I want to call that world for instance because this is a world we grabbed so that way we kind of know what it is we can do that tell update that. Okay. It's called world. Now I'm to go to a pager post and something like home here, for instance, and I'll get in there and I've got a lot of content going on, and we can use these just about anywhere we want. Okay? I'm gonna get into some of the code here and start to pasted in, but I'm going to put in something like this. I'm going to say, enjoy coffee from around the world around the world, and I want to put the icon of the end there. It kind of simple. I know it's kind of lame, but that's fine. The last step we need to take is we need to actually inserted in the h e mail inserted in the page here. So if you go back once again in a lot of going to tell you, a lot of these icon fonts work this way. There's tons of these at work like this. Generic cons, dash icons, etcetera. Last thing we need to do here that school backup is we need to copy the html copy. Hmm. I'm gonna just go in here and copy this stuff, click okay? Just by clicking ok, doesn't actually copy it, I'm gonna go back out. Going to my page now or post wherever you want to use this there's a big difference between the visual editor in the text of the visual editor. A lot of times is just going to show what you paste if you want to get into the html and do some changing and anything, you want to go to text. So I got a text here, and I'll find where that text is enjoyed coffee from around the world and just pasted in the actual text there. If you look at the code that I gave you, you're going to see that the function name itself is not called properly. So I actually try to get a little tricky little fancy because I wanted to call everything creative live. So what I did was I the code here, if you look, it should actually be function. And this is the name of the function should mirror or match, which shows here in the ad action. So if you just make these to the same so you can copy creative, live and then pasted here, you could do that, I have to do it that's gonna actually go load everything so I'll load the css file. I'll click update file I'll go take a look at it if you look there's the world.