Go back to: General discussion
[15:07] <woutercox> Welcome to the sixth (?) chat
[15:07] <woutercox> Any parts you had problems with, or questions about?
[15:07] <@absent> It all looks good.
[15:07] <woutercox> I mean, styling the video and adding the images?
[15:08] <@absent> The videos look good.
[15:08] <@absent> The audio is good this time.
[15:08] <woutercox> sorry, I meant to say: "styling the HTML and adding the images"... :)
[15:09] <woutercox> nothing you have trouble with, or questions about?
[15:09] <@absent> Actually, no questions here.
[15:09] <@absent> You're very complete in your videos.
[15:09] <woutercox> thanks
[15:09] <woutercox> Well, you know what... since next week is about webfonts, why don't we try that now?
[15:10] <@absent> Sure, if you don't mind.
[15:10] <woutercox> I don't see what else we'd do...
[15:10] <woutercox> I'm using what's called a "Font Kit" from the Font Squirrel website: http://www.fontsquirrel.com/fontface
[15:10] <woutercox> You can get the kit for that font at http://www.fontsquirrel.com/fontfacekit/Sansation
[15:10] <@absent> Okay, visiting that site now.
[15:11] <@absent> Now I have the zip file.
[15:12] <woutercox> So, create a subfolder called 'sansation' where your html document is and extract the files there
[15:13] <@absent> I'm checking out demo.html now.
[15:15] <@absent> So the different fonts seem to have 4 files each.
[15:15] <@absent> .eot, .svg, .ttf, and .woff
[15:15] <woutercox> If you look at the source code for that file, you can see that there's the following line in there:
[15:15] <woutercox> <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8">
[15:15] <woutercox> eot, svg, ttf and woff are different formats that are served to different browsers
[15:15] <woutercox> we're interested in the stylesheet
[15:16] <@absent> Okay, I'm looking at the stylesheet now.
[15:16] <woutercox> Once you link to that stylesheet in your page, you can use the font like you would specify a regular font
[15:16] <woutercox> In our case that means the following;
[15:17] <woutercox> 1. in the <head> of your html document, you put the link to the CSS file:
[15:17] <woutercox> <link rel="stylesheet" href="sansation/stylesheet.css" />
[15:18] <woutercox> (because we extracted the font inside the folder 'sansation' - you might have to rename the folder)
[15:19] <woutercox> 2. In the CSS file you've been using all along, you can use the font like a regular font:
[15:20] <woutercox> body { font-family: SansationRegular, Georgia, Verdana, Arial, sans-serif }
[15:20] <woutercox> When you do that, you should see your font change to the Sansation one
[15:20] <senex_> Not to derail, but I wanted to share what I've been working on throughout the course. I ended up supplementing the course with a lot of research, and actually bought that From Photoshop to HTML book over at tutsplus.com as well. I think it's starting to turn out fairly well, still need to tweak it a bit (mainly webfonts, post formatting, building a border-image for images, etc). and add cross browser support. I'm act
[15:20] <senex_> *** edited by user's request ***
[15:21] <woutercox> Hi Senex, that's great. It's a great book
[15:21] <@absent> Wouter: okay, I'm adding to my page now.
[15:21] <@absent> Senex: what is that? I'll check it out later.
[15:21] <woutercox> okay absent
[15:22] <woutercox> senex_: downloading the file now...
[15:22] <senex_> That's the html/css/images for a portfolio website I'm building with what I've learned.
[15:23] <senex_> I've done design in photoshop for a long while, so I've been meaning to learn how to build websites for a while. http://senex.deviantart.com/
[15:24] <woutercox> Looks very nice senex_
[15:25] <senex_> Thanks
[15:25] <woutercox> afk, brb
[15:25] <woutercox> back
[15:25] <@absent> Okay Wouter: I plugged in the font!
[15:25] <@absent> That was very easy.
[15:26] <woutercox> absent: can you see that it's working?
[15:26] <woutercox> Yeah, it is, isn't it?
[15:26] <@absent> It is. That's great.
[15:26] <@absent> It looks very stylish, but you can still select text!
[15:26] <@absent> That's awesome.
[15:26] <woutercox> Yup :)
[15:26] <woutercox> And now you can use regular CSS to syle the fonts.
[15:26] <woutercox> Ems for the size, bold and italics...
[15:26] <senex_> I suppose I came in a bit late, are you guys discussing webfonts through the google api or the html5 one?
[15:27] <woutercox> senex_: fontsquirrel
[15:27] <senex_> oh, okay
[15:27] <woutercox> absent: but remember that there are variations...
[15:27] <@absent> Is fontsquirrel using html5?
[15:27] <woutercox> absent: I don't think that has anything to do with eachother
[15:28] <@absent> I guess I'm confused about the "google api" question.
[15:28] <senex_> Sorry
[15:28] <senex_> http://www.google.com/webfonts
[15:28] <woutercox> There are different ways of adding webfonts
[15:28] <woutercox> I'm partial to the fontsquirrel solution, but all have their own strengths
[15:29] <senex_> I hadn't seen theirs as of yet
[15:29] <woutercox> If you look in the CSS, there's also Sansation_Light and Sansation_Bold
[15:29] <woutercox> those are variations of the font
[15:29] <@absent> Right. I see that.
[15:29] <woutercox> some browsers change the font nicely when you're using a webfont and font-face: bold
[15:30] <@absent> Will a browser ever automatically select a variant?
[15:30] <@absent> Or can we cut some of the fonts out to reduce size?
[15:30] <woutercox> but some (I believe, Opera), don't. So in those cases it's probably better to use the variant.
[15:30] <@absent> I noticed the zip is a little large.
[15:30] <@absent> All those fonts might be heavy for a mobile browser.
[15:30] <woutercox> You can create your own kit: http://www.fontsquirrel.com/fontface/generator
[15:30] <woutercox> and there are all kinds of options
[15:31] <woutercox> senex_: did you have any more questions about the videos and about styling the HTML and adding the images?
[15:32] <woutercox> I know the book, so I'm guessing you learned (or will learn) a lot through that as well
[15:33] <woutercox> Another book I can definitely recommend is "Bulletproof Web Design" by Dan Cederholm...
[15:33] <woutercox> So... questions?
[15:34] <senex_> I think I'll be okay. I got over an obstacle through the course that had blocked me a long time, which was basically getting my mind comfortable wrapping around the architechure relations between css and html. It's rather elegant now that I understand it actually.
[15:34] <senex_> I read through most of this as well http://diveintohtml5.org/
[15:35] <senex_> architecture*
[15:35] <@absent> Oh, yeah. I'm reading dive into html5 as well.
[15:35] <woutercox> Html 5 will come for sure, but is not what this course is about
[15:35] <@absent> great site.
[15:35] <woutercox> But it's very cool, I admit
[15:35] <@absent> questions about webfonts, you mean?
[15:36] <woutercox> any questions about the course, really
[15:36] <senex_> I'm good, thanks. I just wanted to drop in and share my results as I happened to be awake, heh. (GMT-8, 6 in the morning)
[15:36] <@absent> I mainly took it for the gimp instructions, I was already mostly familiar with css. So the gimp portions have been very informative.
[15:37] <@absent> Thanks for putting the course together Wouter, I leaned a lot.
[15:37] <woutercox> No problem, you're welcome
[15:37] <senex_> Indeed, it was helpful.
[15:37] <woutercox> Okay, let's close the 'official chat', but we can still chat
Chat log week 6