PSD to HTML 3.2) Typekit and Google Fonts

Previous: PSD to HTML 3.1) Creating a Style sheet

Next: PSD to HTML 3.3) Setting Up the Navigation

PSD to HTML Complete Course

Transcription of PSD to HTML 3.2) Typekit and Google Fonts

now that we’ve gotten our CSS file started we appoint some very very basic styles to her text we’ve given at the start great color and the census arafataerial fun I want to talk a little bit more about the text nowfirst thing I want to do just a very quick cleanup task is looking at theirparagraph year some of the text seems a little cluttered and little pushtogether and it’s just a little bit money if your letters are too closetogether some input just the tiniest bit of letter spacing in between ourcharacters so I’m gonna go to text me here to our site done CSS file an egoand point out that I moved everything into a new folders all the changes wemake in this lesson will be saved in the site 07 folder and for the body of ourdocument inside the body ruled that we’ve already created here we’ve set thefont size and also against will put a little bit of letter spacing in there sowe’re going to use the letter spacing property and I’m gonna send it to zeropoint to pixels some very very small number let’s save that come back tochrome in refresh your page and now that gives our text a little bit of breathingroom as you can see it’s not a huge difference but it does uncluttered thetext ever so slightly and felt a little bit better so the next thing I want totalk about if we jump into Photoshop is our HeaderText I’m gonna show you twodifferent ways to find the part that you’re looking forwe’re going to use Adobe’s tight kid and then we’re going to take a look atGoogle Finance now the typed it is just for demonstration purposes the fun thatwe see appear in the title is a type kids want and i’ve seen that far to ourdesktop and if you want to know how to do that it was covered in the originalresponsive portfolio design course as you can check that out there I thinkI’ve seen that particular fun with my desktop so that I could use it inPhotoshopand now and take a look at how we can sync that fund with our website know ifyou want to sync it to your local computer it’s a little bit trickierbecause you need to have a web server such as Apache or something like thatset up on your local machine and that’s a little bit beyond the scope of whatwe’re gonna talk about but I still want to show you how to use type kid to tieyour font to a specific website so I’m going to jump back into your browserhere and I’m gonna come up here to the top two are creative cloud applicationand if you’re using the most recent versions of Photoshop if you using theCreative Cloud version then you should have access to this creative cloudapplication here and you’ll notice there is a cab here for funds to the funstabbed and we can see this funny here over an informal PE is currently syncedwith my desktop however I want to sync to my website so that I can actuallyupload this to my website and you that font on my website so I’m gonna go tomanage funds and that will open up and obese type kid website and we can seehere that we have this alvorada informal PE font seemed to our desktop then clickon that far to get more information and we can see the different styles forfunds we can take a look at different specimens take testers etcetera but whatI want to do is only click over here and you’ll see first of all that thisparticular fund is available for web use and desktop use and it’s only been seento my desktop I wanna talk now about how to seek it for web use for how to use itin your own website will click over here are news funds and we get this popup andI’m gonna click over here on web once we click on that it tells us that we needto apply this fund to aid kit so I’m gonna create click on this link here tocreate a new kid and this will give us another popup window and here we type inthe name of the site so maybe something like my design portfolio and the newtype your domain here so maybe mydesign portfolio.com that might be an actual website I haven’t checked out butlet’s pretend like it’s not let’s pretend like we own this particularwebsite and and we want to we want to use this phone on our website that’s howwe would do it now if you also heading web server on your local machine and youwant to test this on your local machine could also take common space localhostand then we can use it on our local machine and on our website but againwe’re not going to walk through what it takes to install a web server our ownmachine because again that’s beyond the scope of this course however him justgonna put localhost here just that we can see what our next options are sodisable this badge here and click on Continue will take us to the next pageand this will give us our embed codes so first of all we need to install the JavaScript by taking this code here and then commenced see on a macro control see ona PC to copy that code and then we’ll jump into HTML page index HTML andinside the head of her body and the head of our document and students of Barstowseats here I’m gonna paste that script code so that’s pulling you know theJavaScript that we need we’re not quite done with him back into the website andclick on Continue and this takes us to our type Kidd editor in the type it andhere we have few options we can choose which weights and styles we want toinclude for this particular project using regular and bold we can choosewhich characters we want to support as well as which selectors we want tosupport there’s also a nice little link here for using funds in CSS and if weclick on that exists a pop-up which tells us exactly how to use it so wewould basically set our fun family property equal to alvorada informal P sowe can justcopy this value here and that’s not copy to our clipboard in anywhere we want touse it we just set a fun family property to that values let’s close this and I’mgonna click on published keep in mind that none of this will work until youclick on publish once you click on publish you’ll be able to use thosefinance on your local host or on whatever website you entered in when youare entering in your settings now again we’re not going to see this working onour local computer unless we have a web server installed and running and we’renot really gonna get into that i just want to see the code that you would needto make that work so now we’ve done that we publish it would close out take itand go into our website start up our web server and then we could go into text mefor example and save our index HTML file and then in our CSS would come down hereand for our would say all of our heading tags each one each to all the way up toeach six we would set our fun family property equal to pace that they’re alsogonna take comic sans serif so that we have a backup in case for some reason ortake it fun isn’t working and that’s all you need so we can see that and then youwould jump back into your browser and refresh and as you can see it’s notworking here because we don’t have a web server setup we don’t have somethinglike a patchy set up on our system so we’re not going to see that works herebut again I just wanted to show you how that works in case you wanted to installa web server on your own system either way this is still the code you would usehere and here if you wanted to publish this to your own website you wouldn’thave to worry about installing your own web server if you were just gonna pushit up to your website intestine from there in that case you would just againwhen you’re going through all of the type kit settings and entering in allyour settings you would enter inthe URL for your website to basically look it up so that your funds would workon your website but again since reduced testing on the local machine here andwe’re not using a web server when I’m going to do something to use Eastsimilar fund that we can find in Google files which you are free to use on yourown computer or on the web because you can actually download these files toyour system so what I’m going to do is to search for fun called my laundry isSams and it’s this one right here so with this particular font there’s a fewdifferent samples of it I’m gonna come down here and we have a few items herefor in the second i cant years for quickies and click on that and that willgive us some options so I’m gonna check normal in bold in case we decide to useball scroll down to the bottom and this is the code we’re gonna add to ourwebsite so we can either put a link tag in the head of our document or we canuse it at import statement inner CSS file and this is the 1 I’m gonna use soI like this at import statement year and copy it and then we’ll jump back intoour website will go to our site does CSS file it up here at the very top we’regonna pace that import statement which will allow us to use this fight here nowhow do we include that fun dinner page or first of all let me go ahead andcomment about this line here because this particular font is not gonna workon a local host I just want that code there so that you can use it if you wantso we also need to comment out or scripts here to put in openingcomet tagged up here and after the script for a closing comment XO theseare comment it out and will no longer be used it will be ignored by the browserbut again only that could be there for you in case you want to use it for yourown websites all say that go back to our site at CSS file and see that if we goback to Google funds and scroll down a little bit we can see a piece of codehere for how to integrate it into her CSS and just copy that and jump backinto our file and paste it and this is the phone working to use for all of ourheading tags which one all the way up to age 60 now saver CSS file jumped backinto a browser or go back to our web page refresh your page and now all ofour heading finance have this new frontal plane to it over heading tagsexcuse me and that’s basically what we’re going to be using for the rest ofthis course will be using aerial for our paragraphs and links and things likethat and for all over each tags are each element’s we’re going to be using thisalegria fun so thank you for watching and I’ll see you in the next video