Skip to main content

Using Web Fonts

Lesson 52 from: WordPress for Photographers

Justin Seeley

Using Web Fonts

Lesson 52 from: WordPress for Photographers

Justin Seeley

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2200+ more >

Lesson Info

52. Using Web Fonts

Next Lesson: Web Fonts Q&A

Lessons

Class Trailer

Day 1

1

What Can WordPress Do?

07:49
2

WordPress.com vs WordPress.org

10:41
3

Domains and Hosting

08:14
4

Domains Q&A

10:00
5

Demo: 1-Click Install on HostGator

08:53
6

Audience Q&A

38:03
7

WordPress Dashboard Oveview

32:31
8

WordPress Dashboard: Settings

33:22
9

Audience Q&A

03:42
10

Working with Posts

33:44
11

Working with Pages

30:46
12

Audience Q&A

34:57
13

Using WordPress Plug-ins

44:26
14

WordPress Themes

27:13
15

Final Q&A

04:05

Day 2

16

Managing Your Media

35:20
17

Managing Your Media Q&A

05:48
18

Working with Video

09:39
19

Top 5 Photo Plug-ins

19:57
20

Top 5 Themes for Video

13:56
21

Top 5 Video Plug-ins

10:37
22

Creating a Discussion

09:53
23

Moderating Comments

12:26
24

Creating Ratings and Polls

11:27
25

Purchasing a Theme

17:58
26

Customizing a Theme

08:23
27

Editing Code for Non-Geeks

24:54
28

Customizing Themes Q&A

07:43
29

CSS Crash Course

24:15
30

Using the WordPress Codex

13:13
31

Creating and Using Menus

08:28
32

Lightbox Plugins

13:13
33

WordPress Codex, Menus and Plugins Q&A

08:43
34

General WordPress Q&A

10:17
35

Optimizing Images for the Web in Photoshop

32:30
36

Optimizing Images Q&A

10:56
37

Displaying High Resolution Images on the Web

11:35

Day 3

38

Protecting Images Online

22:06
39

Adding Watermarks

17:56
40

Copywriting Images

08:40
41

SEO 101

24:00
42

Engaging Your Audience

05:26
43

URL Shortening

09:54
44

Exporting/Importing WordPress Data

10:33
45

Backing Up WordPress

13:26
46

Security 101

24:20
47

Spotting Trustworthy Themes/Plugins

24:32
48

Trustworthy Themes/Plugins Q&A

21:13
49

Battling Spam

18:38
50

Dealing with a Hacked Site

15:41
51

Protecting Your Site

10:46
52

Using Web Fonts

24:08
53

Web Fonts Q&A

11:36
54

Thanks + Credits

04:04
55

Monetizing Your Content

24:55
56

Final Q&A

28:31

Lesson Info

Using Web Fonts

we're calling this next section, Web Fonts explained, because I know this is something that a lot of people want to know how to use and how to do something with a Web fund because our typography capabilities online are terrible. My default, Um, as somebody who comes from a print world who is used to using any and every font that I ever wanted to use in a print document. I found the Web world to be extremely limiting because I had aerial times New Roman, Georgia and Courier and all these ugly fonts I'll you know, but anyway, then became the ability to embed fonts inside of a Web page. And there's many different ways to embed flaunts inside of a Web page. There is, uh, the legal way. There is the illegal way There is the pseudo legal way. And there, you know there's all different degrees of in between when it comes to Web funds. Theoretically, what is legal when we talk about Web funds, right? Well, if you want to be completely 100% legit legal, I suggest you use a Web flaunts service ei...

ther Google Web fonts or type kit or some other form of I mean, there's a There's a bunch out there in it right now, but let's go over Google Web funds because it is the free one Google Web funds. Okay, so here we are on Google Web funds, and they have a whole bunch. They're actually expanding this all the time. The problem with Google web funds for a while was they would have a farm up there for a little bit, and then they would take it away. I think now they keep it up. There is far as I can tell, but you can see. And not that all of these fonts are beautiful. Mind you. Okay, there are a few that I would say our great There are a few that I would say. Oh, my Lord, why would you put that on anything? Ever? Okay. And I'll point out some of those as we go. I am not shy. Okay, So, uh, cabin condensed. That's a pretty good sand surf on. Um, see, a couple of other ones that I like. This one is, I think borderline horrific. Um, Lemon is okay. Dr. Suki Yama? Yeah, I don't think so, Chief. All right, I mean, you can't read it, right? It looks like it's written in Sanskrit or something like that. Not if you write Sanskrit or read it. More power to you. Um, you know, all these script he phones I find to be extremely distracting. But there are some great ones in here as well. Take a look on the left hand side. You can actually filter. So I could say, OK, so show me only the san Serif font. So I'm gonna take away everything but the sand. Sarah funds. Okay, I'm gonna hit, Okay. You can go by thickness. You can go by, you know, slant, whatever you want to use in this case, I just want to search for San Serif wants, and I'm gonna look, and I'm going to find one that I theoretically like. All right, this one's easy to read. It's not my favorite font, but it's easy to read. So this one I'm gonna use is called Bowlby one b o w l b y. One owed in e. Okay, Now, when you want to use a Google web, Florent, there are a couple of different ways to do it. You can add it to a collection, All right. That's if you're gonna use multiple web fonts at a time, or you could just use the quick use. I'm gonna choose quick use right here. Just like to show you a quick preview of how to use these. All right, let's go to quick use. And once I get on here, you're going to notice that you'll have the ability to change between what weights and, you know, different variations of the fault that you get. In this case, there's only one wait. As you start to increase the amount of stuff that you include inside of the character palette that you're using, you will see this little needle start to rise. This is your page load time. The downfall to Web fonts is that they slow down a Web page. So if you start using or 60 Web fonts on a page, don't be surprised if people start whining at you. Okay. I think Web fonts are good for a couple of things. They're good for text logos that you want to create online. They're great for headings, and they're great for, like, banners or call out areas. I do not think they should be used for body copy. Okay? Simply because body copy is a majority of what we have on our site, right? It's all body copy. If you have to load all that through a web form, that might take a while, huh? Yeah. If I choose one of these fonts and loaded on a page, my understanding would be that that would slow down the whole page regardless of whether I was using it as a body font or is a title fun? Yeah, it is. And I'm just talking about, like, using multiple ones at a time. So, like, it's okay to use it for a head. And please don't use it for your your heading, your comments, your body that you don't mean. That's kind of what I was trying to get out there, but thank you. Yeah, that's that's absolutely true. So keep a look on the meter, just like in a taxi cab. Watch the meter. All right. And so what I'm gonna do here is I'm gonna scroll down and check this out. All right? You get to actually pick between three different ways to put this on your site, you can use the standard method, which is probably the most universally accepted method. That's by linking to a style sheet. Inside of that, Google has. You can use the at import function, which basically, you put this into your CSS file somewhere, or you can use JavaScript. This is the slow one. Okay, this is the one you want to say no to. When it comes to extra JavaScript, friends don't let friends use bad java. All right, so in this case, I'm just going to copy this. This is just a link to a style sheet, okay? And I'm going to show you how to use this. So I'm just gonna copy this. They give you this code, all right? And this is you just follow the steps. Do you see how this is numbered? Okay, so step one picked the font step to choose your character while I want the Latin set. Step three, pick your method step for integrate your CSS. We'll get there in a minute. Okay, So I'm gonna go in to my code editor, and you could do this and let's do it on the WordPress back in that way. Everybody can see All right, this is how you even if you don't have a code editing application. So let me close these up and go here, all right? And let's say that on the about me page, for instance, I want this font of this heading to be that Bowlby fund. All right, so let's go in here. Let's go down to appearance and let's go down to Editor Inside of Editor. I want to find the header dot PHP document. It's over here on the right. Chances are in the header. You're gonna find a place where they have referenced some sort of style sheets. In this case, it's commented right there, theme styles right below that I'm going to enter. And I'm simply going to paste in the style sheet that Google gave me. It's a Google style sheet, so I trusted, and I trust that they have security in place so that nobody's gonna mess with gun. So I've pasted that in. I now hit update file. Okay, it's there. You will not see an immediate change. If I go back over here and I up, I update you're not going to see any change. Why? Because just because I've linked to it doesn't mean acts actually in play, right? So I have to actually find out what this is. That's where our inspect element think comes out. Right. So let's right click on this and choose inspect element that's in chrome. You can also use firebug. And remember, this is HDE two with a class of post title, So I'm gonna go find the post title attribute inside of my CSS file. Okay, so I'm gonna go back into my WordPress code. I'm going to go down to style sheet, and I'm gonna search for Paige Dash title. All right, let me make sure I get that right. It was Paige Dash title. Right. Inspect post title, not Page Donald Whoopsie. All right, so post title. There it is. H two dot post title. Okay, Now all you have to do is take this code. That's on step four. Copy it. Go back to the area you're trying to change. As long as there's not an existing font family in this area here, which there's not, I can go right here, and I can pace that in font family. Whatever. Then I'm going to click update watch when I go back to hear hopes I closed the site. Let's go back to here, Okay? If I go back to about me, should have changed it, but it didn't. Why didn't it? Does have a family already in here, you know. I'll tell you what, let's add it to the overall H two. That maybe overriding it. Let's just go up here. Let's add it to the age to. All right, scroll down. Update it. Still not working. So there's still something override, and this is kind of the trick that you have tow work around, unfortunately, so let's see exactly what's making this do that. So here's the H two. I'm looking over here not seeing anything that's doing it. So theoretically, it's just not picking it up. Let's make sure my style sheets in there where it should be. It's not. It didn't save the stash it, that's why. Okay, so let's let's go back here. So, like that, just as a little side note, while you're sure we're doing that. Marks Palmer wanted us to know that with the help of winning Tang Long photo that the person who had found that malware they already fixed it. Oh, that's good Internet at work. Good to new. It doesn't always go that easy. All right, so I'm going, Teoh, I'm gonna do this to the code editor and make sure that this is working properly because for some reason, it's not reading the style sheet that I'm linking to. So there's the style sheet pace that in. And now let's refresh. Okay, it's still not grab it. So maybe it's cashing it clear browsing data, and this is the process you have to go through. So this is good. So, um, I'll clear out my cash from the beginning of time. All right, so that dumps that out. But seeing out that fix it, still not fixing it. Okay, view the page source. And for whatever reason, that is not interjecting itself in there. So All right. But that is how it works. And I can show you a good example of that on a page here. So let's open up another theme. Okay, It's open up here into premium pixels. And let's find one of Foreman's themes called premium pixels, actually. Know what? We just go to my site and take a look at it, all right? On my site you see this heading front right here. This heading front right here. If I right click on it and inspect the element, you're gonna notice that this is actually using a font called League Gothic regular? All right, Lee Gothic regular is not a standard form on most people's computer. So how in the world is it getting this league Gothic font? Well, if you look in the page source of this document, you are going to see and it'll take me just a second to find it. Que fund? A short of google. Let's see here. Well, not showing up there, either. There's something going on that's weird here, but anyway, that's using the same basic principle. That's embedding a font that is in there. And if I inspect that element, let's go in here and see, um, entry title style that CSS. Right? So it's getting that people are suggesting, uh, open up the header. PHP. That's what I have open. Oh, and say or save it. Yep. That's what I have open. It's just not looking e I have no idea why it's not working, but it's just not so. Um, yep. So, Justin, what? What? You're trying to do. There was ah font that was hosted by Google, right? Right now there are other fonts that you can get you can either pay for. You can get free sometimes where you actually just put the font files up on your server and it serves them up? Is there a reason not to do that or No, not necessarily. Just the Google ones were free. Yeah, that's that would be the only thing you can use and both that you would have to use something like the at import feature. And so basically, and I can actually try to do this. So that's what the at in port? Yeah, you could actually import the u R L to wherever the front lives. And so I can put this in my CSS code and so I can put that in there, something like that, and I could save that, like, event. And then when I go back into here, I can still use that. Let's see if that may be fixed. It still then it's just not registering that I have no idea why it could be a cashing issue could be an issue with my site. I have no idea. But I promise you it works. Otherwise, they wouldn't offer. It wouldn't be live in the something went wrong. All right, Just look at type, kid. Okay, this is another service that you can use. And so, basically, what you're able to do here is you can go in and launch your own kits inside of here. All right, so I've got one that contains some mousse E O slab, for instance. In here, I can also grab the embed code for this, And I can put that into my website or wherever I want to put it. Okay. The basics of type kit is the fact that you get to purchase a licence here and you use it on, you know, whatever slight you want. And then you build kits for each individual site. Then you can call out to those fonts from type kit. The best thing about type kid is they've been bought out by adobe. So that means that they have a lot of backing behind them and their problem not gonna be going away anytime soon. You never know when Google just say you know what Web funds didn't really work out for us. Switch off type kid. On the other hand, I don't think they're going anywhere because the job is really pushing the the envelope in terms of, you know, Web standards and all that good stuff. And they really want to enhance the experience across the web with stuff like this. And so you can go through here and set that up. It walks you through, step by step, how to do that as well. But I'm not sure why. This is not working again. This is going to drive me nuts all day, but, uh, figure it out a break, perhaps? Yeah. Maybe so. Let's go ahead and keep moving. All right? And let's talk about one other option that you have for for doing funds. Okay. This is the I won't say illegal way. Okay, It's illegal, but, um, it works. You take a flight you have on your computer and you upload it somewhere on your website. Okay? You uploaded to directory someone. Your website. Then you can use that, uh, at imports. The same thing. Is buying the phone mean you technically own the phone? Right. But the problem with this is when you upload it. If anybody looks inside of your CSS code, they see where that front lives and they can then go get it and downloaded. If it's a commercial flaunt, theoretically, you are distributing a commercial product that you don't have the license to distribute. It's bad right now. In some cases, you know, it's OK if if it's a universally recognised font or something like that that most people have, I don't think you get into trouble. But if it's like a big time front that people pay thousands of bucks for something like that, your deep, deep stuff. So, uh, you know, be careful with that you want to avoid. I know a lot of people use this, but you want to avoid and I'll show you what this is. You want to avoid people that use something called Coupon. I think you want have would this simply because coup fun fronts are all job script based and they can cause some serious issues using JavaScript for Fallen since think things like that when you have things like Google Web funds and type kit in other areas that I consider to be a lot safer than this coupon is just It's slow to its very slow, and it's kind of a pain for normal people to turn it on and off. So what you do here, basically is if you have a foreign on your system, okay, here's what you do. You go and you find a font on your system. You upload it for the regular typeface. You upload it for the bold typeface you uploaded for italic you uploaded for bold italic. Then you determine the name of the font family. Then you say yes. According to this, I am allowed to embed this fun. What's stopping me from checking that box? Absolutely nothing, right? So if you check that box, you know, theoretically, you're probably committing front, so watch your back. But what this is going to do is then take that flint and package it into a flashlight JavaScript e looking thing that you upload to your website and then used to Java script. And then you use through CSS to theoretically display that fund. You're not actually using the font. You're using a representation of the front, but it's slow. Okay, so let me see if I can just try this one more time I'm gonna go pick another fun at a group of Web points. We're going to try this one more time. So let's pick this one right here. And we'll do quick use this time and I'll do this and copy it, and we'll go back in here and I'm gonna go to the header dot PHP. I'm gonna go right here and paste it in, and I'll save it. Now before I go into the rhythm. More of all this other stuff. I'm gonna refresh this and see if it's in the source code. All right? It is in the source code. There it is. So we're good to go. Let's go back here. I'm finally gonna prove my point. All right? Font family. It's an ugly flop, but that's all right. Font family. Remember where that was? It was in the style that CSS and we're looking for a post title. Right? So right there, Boom. And let's make it like a really big So we prove our point. Really big. All right. Yeah, that's right, man. I'm making the West wants pay today. Um, so it didn't make it big that it changed the form front that I use. I forget what it's called now. So used this one. It's kind of text transform on upper case, though I think Let's see. Is that the same fund? I don't believe it, is it? Well, I promise you it works. Let's see it removed. It removed that code now. So Okay, save fresh. Let's inspect this element. Make sure it's correct. It's to post title And there it is. It is registered there. And if I look in the view page source, it's still not there. That's tanks. So how? I got it to appear there for a second and then it went away. I have no idea, but Okay, so some demos work. Sometimes they don't. That's just how that's how that's how Trolls. So, uh, I promise you, it works most of the time. When I use it stinks. That didn't time. These funds there's instructions on the sites where you get him from, Right? Absolutely. So you just follow those and hopefully you won't have this trouble. Yeah. I mean, I honestly I have never run into that issue. I have no idea what the heck is going on. So, uh, must it's got to be an inheritance thing, huh? Well, it's not in here to say it's not even registering the It's not registering the style sheet. The style sheet declaration is missing right there and so earlier. I had it. If I say that, it should go right over the top of it, it's not doing it. So I mean, this thing is really I'll tell you what. Let's take this girl. Here we go. No. So let's do this and I'll paste that there and I'll take this guy here. You're seeing true MacGyver at work right now. All right, Don't don't do to do save. All right, sucker, I dare you to not be there now. Well, living learned. All right, so you can go on Google Web fonts and try that for yourself. Chances are it will work for you because it didn't for me. But that wouldn't be live TV without the occasional breakdown

Class Materials

bonus material with enrollment

WordpressSlides.pdf
wp_seo_101.pdf

Ratings and Reviews

a Creativelive Student
 

I watched all three days of the course. I am a photographer. The course was titled WordPress for Photographers. Only about 5% of the course was tailored to photographers. Most of the content and discussion was for pro website consultants and bloggers. That aside, Mr. Seeley is so well versed in what he knows well. Imagine sitting in front of the camera for 3 straight days remaining articulate and very professional! The class was really presented for bloggers, not photographers. An example of this is on day 3 where the presenter, after talking about photographers' concerns for an hour or two, said he wanted to transition out of photography into blogging. The class seemed short on the type of content that photographers need. It would have served photographers better if the students present in the studio were all photographers. Discussions on watermarking, photo file size and image theft/copyright infringement showed that Mr. Seeley's background in the needs of photographers is lacking, while his expertise in graphics and web design are VERY impressive. Too much of the class time was devoted to answering narrowly focused tech support questions from people other than photographers. It was a wonderful class for the audience that hijacked it, but it should have been titled and described differently if it was intended for web-blog designers. I really liked the energy, humor, and expertise of Mr. Seeley but the class was too-often off-mission. On day 1, it would have been very productive to show a photographer's WP website that was esthetically beautiful and had all the bells and whistles photographers are looking for. Then explain how you get from nothing to the final website using WordPress. That would have met the needs of pro photographers!

Shannon
 

Justin is an excellent presenter. He's easy to listen to and it's obvious he knows his stuff. As a presenter/trainer, I really appreciated his ability to stick with his outline while he fielded questions, both off and on topic. It takes some balancing to do that. He was good at noting questions that were too far afield and I think he actually answered all of them by the end of the three days. I would definitely attend more classes presented by him. Thanks, Justin and CreativeLIVE.

a Creativelive Student
 

Amazing class! Superb presentation! Justin kept the technical geek-speak to a minimal and made the entire class easy to understand and fun! I think this class should be called Wordpress for the Non-Geek! (As others have said there was not a lot of information specific to photographers, but when it was referenced there was great examples and information provided!)

Student Work

RELATED ARTICLES

RELATED ARTICLES