PDA

View Full Version : Custom fonts


Eliteoomph
03-27-2011, 08:58 PM
Is there a way to add custom fonts to my website?
I want to be able to use great looking fonts.
Normally I would just makes the headers a image and the rest text
but I am trying to get away from that for SEO purposes.

I found this:

http://typekit.com/

but you have to pay for it if you use more then 2 fonts.

I was hoping there was another alternative...

DWcourse
03-27-2011, 10:13 PM
http://www.google.com/webfonts

more limited choices though

Eliteoomph
03-27-2011, 11:24 PM
Looks good man thanks.

I will check this out.

Is there anyway to just upload your own font files on your server and do it that way?

DWcourse
03-28-2011, 12:02 AM
@ font-face http://sixrevisions.com/css/font-face-guide/

You have to consider licensing issues however

Eliteoomph
03-28-2011, 12:11 AM
I guess the major issue seems to be that the main browsers all support different font formats... So I guess I have to have multiple formats installed and then code it to where it will pull up different extensions based on the browser...

Is that right?

DWcourse
03-28-2011, 12:13 AM
I believe the Google and typekit solutions are cross platform. they do rely on an external server so that could be an issue.

Eliteoomph
03-28-2011, 12:21 AM
yeah... i knew they were cross platform but, if I don't use them and just install fonts on my server would that be an issue?

For example if I installed a OTF font but IE only supports EOT I am guessing that means it will not be viewable in IE...

I will have to play around with it a bit and see.

Eliteoomph
03-28-2011, 12:38 AM
@font-face {
font-family: 'ChunkFiveRegular;
src: url('Chunkfive-webfont.eot);
src: local(‚∫'),
url('Chunkfive-webfont.woff') format('woff'),
url('Chunkfive-webfont.ttf') format('truetype'),
url('Chunkfive-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}


OK i think this is what I was looking for...

Thanks for you help man!

gentleone
03-28-2011, 06:16 AM
I use fontsquirrel for free custom fonts. They have also a handy generator to generate the CSS and you can put the fonts on your own server.

http://www.fontsquirrel.com/

Eliteoomph
03-28-2011, 06:50 AM
I was just trying them out...
I wish I could use Trajan Pro as a font...
Love that font but seems it is licensed and a Adobe font...

Corrosive
03-28-2011, 09:08 AM
I guess the major issue seems to be that the main browsers all support different font formats... So I guess I have to have multiple formats installed and then code it to where it will pull up different extensions based on the browser...

Is that right?

Not quite. You are limited to fonts, not by the browser, but by the fonts someone has installed on their Mac or PC.

Eliteoomph
03-28-2011, 10:47 AM
won't just installing the font on the server eliminate that problem?

Corrosive
03-28-2011, 10:51 AM
Kind of. As long as you reference that font in some way, i.e. using @font-face but, as you know, there are browser support issues with @font-face. It is a complex one to get right across all browsers.

Eliteoomph
03-28-2011, 11:28 AM
will the method below not work?


@font-face {

font-family: "atgothic";

src: url("atgothic-extendedextralight-webfont.eot");

src: local("‚∫"),

url("atgothic-extendedextralight-webfont.woff") format("woff"),

url("atgothic-extendedextralight-webfont.ttf") format("truetype"),

url("atgothic-extendedextralight-webfont.svg#webfont") format("svg");

font-weight: normal;

font-style: normal;

}

Corrosive
03-28-2011, 11:33 AM
For some browsers, yes; http://www.webfonts.info/wiki/index.php?title=%40font-face_browser_support

Eliteoomph
03-28-2011, 11:35 AM
dang netscape.... :-D

Corrosive
03-28-2011, 12:00 PM
dang netscape.... :-D

Ha, ha. Can't imagine anyone actually uses that any more! The good thing is that browsers such as Opera, FF, Chrome etc almost 'force' downloads of the latest versions by default and IE supports font-face anyway. To be honest, I think you are on relatively safe ground here. Just make sure you test, test and test :wink:

gentleone
03-28-2011, 01:19 PM
Using @font-face is pretty solid by now

Eliteoomph
03-28-2011, 01:49 PM
sounds great!

Thanks for your help guys!

domedia
03-28-2011, 02:50 PM
Google has a great implementation, and also hosts a directory of fonts you can link to.
http://code.google.com/apis/webfonts/

Corrosive
03-28-2011, 03:11 PM
Google has a great implementation, and also hosts a directory of fonts you can link to.
http://code.google.com/apis/webfonts/

Must admit I've made good use of Google Fonts recently and have found the results pretty good. One odd thing is that 'scripty' fonts don't seem to display well (if at all) on IE.

Eliteoomph
03-28-2011, 04:35 PM
yes, I have used this and it is very nice, but also a very limited number of fonts...

Eliteoomph
03-28-2011, 04:41 PM
I have noticed that also Corrosive,,, especially in smaller sizes...
I noticed orbitron looked very cluttered smaller while Quattrocento worked out well...

just have to play around with them

domedia
03-28-2011, 05:24 PM
That is the nature of font faces. Some look better small and some look better large.

johnMoss
03-31-2011, 03:15 AM
Here's another resource:
http://www.fontyukle.com (http://www.fontyukle.com)