Hi,

 

I came across this site which uses some nice fonts. Obviously this would be great from a design point of view.

 

But I've had a look at the code behind it and can't see how they've done it.

 

How is this achieved?

 

The site is: http://www.webwiseone.com/

 

Thanks.

The second stylesheet has this:-

body{font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;}

and the last of the three has this:-

body{line-height:1.5;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;color:#000;background:none;font-size:10pt;}
h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue",Arial,"Lucida Grande",sans-serif;}

 

Helvetiva Neue is not a web safe font according to http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html but I think that is what I am seeing. I can't see the point of coding Lucida Grande after Arial because nearly every computer has Arial so virtually no one will ever see Lucida Grande. Browsers process the first one that they can process.

 

If you want a special font, consider @font-face which is now supported by all IE versions, Firefox, Safari, Chrome and Opera. See http://www.miltonbayer.com/font-face/ and choose a kit from here:- http://www.fontsquirrel.com/fontface

Thanks Wickham,

 

I also found this: http://soyrex.com/articles/tutorial-using-font-face-to-embed-fonts.html

 

What I don't understand is that if this capability has been available for so long (going back to late '90s I believe), how come it's not more widely used?

Thanks Wickham,

 

I also found this: http://soyrex.com/articles/tutorial-using-font-face-to-embed-fonts.html

 

What I don't understand is that if this capability has been available for so long (going back to late '90s I believe), how come it's not more widely used?

 

 

@font-face was a Microsoft feature only in IE. The other browsers have recently caught up as it's now officially a CSS3 standard.

Hi,

 

I've tried using font face but I'm getting this error message in dreamweaver when I try to save the css.

 

"This documents current encoding can not correctly save all of the characters within the document. You may want to change to UTF-8 or an encoding that supports the special characters in this document".

 

This is the css I'm using:

 

@font-face {
font-family: 'JosefinSansStdLight';
src: url('fonts/JosefinSansStd-Light-webfont.eot');
src: local('☺'), url('fonts/JosefinSansStd-Light-webfont.woff') format('woff'), url('fonts/JosefinSansStd-Light-webfont.ttf') format('truetype'), url('fonts/JosefinSansStd-Light-webfont.svg#webfontywsmfDvZ') format('svg');
font-weight: normal;
font-style:italic;
}

.title {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
font-size: 1.2em;
text-align:center;
color:#727272;
}

 

Any clues please?

It's probably

src: local('☺'),

 

That was also in the root kit I used for @font-face and I don't know what it is. I left it there.

 

See if you can save with it and just ignore it.

Thanks again!

 

I'm just about to publish the first draft for review so I'll see how it works.

for @font-face how wary do you have to be of using unlicensed fonts?

There are a number of free fonts, look at google fonts and fontsquirrel. On websites such as dafont, you could ask the author. For smaller sites, you could probably get away with it, but with the number of decent free fonts, I guess its not worth the risk

regarding fonts .. i have come accross this site

 

It has over 6800 fonts ?!!

 

The disclaimer reads

 

"Fonts found on this site were not created by the webmaster. They were obtained from various sources on the internet that labeled them as "freely distributable". If you should discover fonts in this collection which you recognize as copyrighted, please email the webmaster immediately so that they may be removed."

 

One to steer clear of ???

Its a bit ambiguous, it could be freely distributable, but you may only be allowed to use it for personal sites. If you used a font on a clients website, the font author sees it and tells the client, you may lose that client for future work. I wouldn't risk it unless I was sure.

Just starting out so a bit wary of it all, although there is decent texture background generator on there! (for slow Ps learners like me)

I recommend Cufon. I think it is the best one. Here is a tutorial:

 

http://net.tutsplus.com/articles/news/the-easiest-way-to-use-any-font-you-wish/

Cufon although the best replacement method, I would recommend @font-face, it is supported by all the modern browsers. And it degrades very well for older browsers