PDA

View Full Version : Font embedding for dummies?


sebaz
01-23-2012, 05:22 PM
I'm looking for a really comprehensive tutorial for beginners about embedding fonts on websites, if possible using Dreamweaver. I know barely anything about web design. It's something I would love to learn some day, but for now I don't have time for it. My goal for now is to get my videography one person business off the ground, and I have an OK website, but since I don't want to use the regular fonts available such as Verdana, Trebuchet, etc, I designed it in Photoshop, exported as slices and then put some finishing touches in Dreamweaver (CS5).

Searching for font embedding I came across this page: http://sixrevisions.com/css/font-face-guide/ which gives me an idea of what to do, but I tried to follow the instructions with a font called Cabin, a free font from the Squirrel website mentioned in that article, and I'm still not getting any results, because of my poor knowledge of HTML code. Obviously I have changed all iterations of Chunkfive in the example code to Cabin, and to the real file name when the code needs it, but still I get Verdana, or Trebuchet when viewing on the browser, or even in design mode inside Dreamweaver.

What is interesting about that particular method is that if it works it's supposed to display the right font across different browsers. So I was wondering if anybody here knows of a more basic tutorial for this. I really like that Cabin font and that's the one I want to use throughout the website.

Basically I'm trying to find out where those chunks of code are supposed to go. I know there's a <head> section and a <body> one, but I don't know anything about style sheets and things like that. However, it's not hard to put the code in the right place if a tutorial shows me how, that's how I did the video embedding with Flowplayer.

Thanks,

Sebastian

Ricky55
01-23-2012, 07:26 PM
What a great topic.

You have some great options open to you now a days.

Probably the simplest and cheapest is to use the Google Font API. They have quite a decent collection of fonts and they are very easy to work with, its literally one line of code that you copy and paste. Only issue is that you have to choose a font from their collection.

http://www.google.com/webfonts

Then you have paid for services such as Type Kit but their are many others. Again you have to choose from their library but they have enough to satisfy anyone and again they are easy to use.

https://typekit.com/

Then you can use the CSS3 @font-face which lets you use any font at all as long as you have the appropriate licence to use online.

This is my preferred method as its free and more flexible. To get this working you need some CSS and the fonts in a few different file formats to support all the browsers but there is a great service that does all this for you.

You can download one of their pre-baked kits or upload your own fonts but again just make sure you have the licence to do this.

http://www.fontsquirrel.com/

This should give you a good idea of the options. Come back if you want any further help.

Cheers

sebaz
01-23-2012, 08:04 PM
Thanks, Ricky, actually I knew about Font Squirrel although maybe I didn't put all the details about it in my post. I had downloaded the Cabin font kit, but I was rather confused about where exactly to put it in my website's code. However I see that there's a demo.html file in there that might be of some help. My goal is to do the CSS @font-face method, as that tutorial explains that it provides the best compatibility between browsers.

Ricky55
01-23-2012, 08:48 PM
Yes like I say I prefer to @font-face if you use the demo then you should be able to work out what to do. The other solutions do have there place though.

With the @font-face you basically make the declaration using the code provided in your style sheet ensuring that the paths to the fonts are correct relative to the style sheet. Then when you want to use the font you just specify the font-family with the name you provided in the @font-face.

Cheers

sebaz
01-24-2012, 12:44 AM
I managed to make it work using the demo in the kit. The problem I have now is that because I had designed the whole thing in Photoshop, when I cut the slices I didn't worry about margins, because I arranged the block of text as a layer, moving it freely wherever I wanted it.

But now, deleting the whole image that contained the text, and having replaced it with the text with the embedded font, I have the problem that the text occupies the whole cell. I tried to find how to use margins on just one cell and I couldn't. I know there's margins for the whole page in the page properties, and the cell pad property for the whole table, but if I set that to anything but zero it turns the whole table into total mayhem.

I also tried to split the cell in two, because the way it's laid out I only need margins on one side of each text block, but when I try to move the line that separates the new two cells to be able to create a fake margin that way, it doesn't let me move it at all.

So it is possible to set margins on a specific cell, or will I have to design the whole thing in Photoshop all over again?

sebaz
01-24-2012, 03:46 AM
Update: the only way I found to make that possible was to delete the whole content of the cell, then insert a nested table with a cell padding of 30 px and then pasting the same chunk of code from the original file (I obviously worked on a copy first).

It looks OK, and I achieved my purpose, but is that the only way to do it? Apparently margins, or cell padding, can only be applied to all the cells in a table equally, not individually, which I find hard to believe when I see how complicated web design has become in the past ten years and how many standards have been published so far. But lets suppose it's that way. If it is, then you could create some left and right margins by splitting the cell in 3 columns, and setting the first column to 20 px wide, the center one at whatever you need and then a third column at 20 px if you need a right margin as well.

But when I tried to do that, Dreamweaver didn't allow me to drag the border between the columns, or type in the width of the column. I would type it and as soon as I pressed tab or select something else, the number I had typed was gone. So why would this happen?

Is there a correct way to do this, or it doesn't matter as long as it looks OK?

Corrosive
01-24-2012, 08:35 AM
Is there a correct way to do this, or it doesn't matter as long as it looks OK?

Yes, tables are not meant to lay out websites. You need to concentrate on divisions (div tags) styled and positioned using CSS. The 'export from photoshop' method will just lead you to more and more problems like this. Time to knuckle down and learn CSS I'm afraid.

sebaz
01-24-2012, 08:55 AM
OK, but I mean, as long as you're working with tables (which is what Photoshop gives me and I can handle for now), is a nested table inside a cell an acceptable solution until the day when I have time to learn proper web design without Photoshop?

So far it looks fine on IE 8 and 9, Chrome and Firefox, as well as the Android browser, so I would think this solution isn't so terrible.

Corrosive
01-24-2012, 10:59 AM
If 'looking OK' is your goal then fine.

gentleone
01-24-2012, 09:34 PM
is a nested table inside a cell an acceptable solution until the day when I have time to learn proper web design without Photoshop? it was maybe an accepatable solution 10 to 15 years ago, because at that time there was no better solution. The padding problem you've faced now they solved it back then also with spacer gifs (spacer.gif).

But that was then. The web has moved forward since. Better and more flexible solutions (CSS) solved those layout problems. Now we use only tables for where it's intended for: tabular data.

If you really have plans to do something in web design/develoment I'd recommend to start with learning the basics of HTML and CSS. It's really not difficult as it seems like.
Here's a good resource site especially for starters: http://htmldog.com/

Ricky55
01-24-2012, 10:08 PM
If you don't have the time to learn why don't you spend your time doing what you do best and pay a web designer to do the site for you. Just a thought.

Or have you considered using a CMS such as Wordpress just buy a really nice theme and your in business.

http://www.premiumpixels.com/wordpress-themes/

sebaz
01-27-2012, 04:54 PM
If you don't have the time to learn why don't you spend your time doing what you do best and pay a web designer to do the site for you. Just a thought.


I would prefer to have total control over the appearance, in any case when I have money to hire a designer I will most likely tell him or her to optimize the code for SEO rather than design from the ground up. Plus, I really would like to properly learn web design some day soon. Do you have any tips for a good book to get me started? There are so many languages and terms in web design nowadays that it makes me dizzy just to think about it.

sebaz
01-27-2012, 04:56 PM
If you really have plans to do something in web design/develoment I'd recommend to start with learning the basics of HTML and CSS. It's really not difficult as it seems like.
Here's a good resource site especially for starters: http://htmldog.com/

Thanks, I'll give it a try as soon as I have some time.