Upload Font to Server

HTML & CSS
1

I have one unusual Script font sparsely used on my site. This font is defined in my external style sheet.

If I upload the font file to the server will it then render correctly, or am I dreaming?

Thanks.

Rick

2

It has to be in the correct format, and you have to declare it a certain way. Simply uploading a .ttf to the server and using it’s name in a font-family declaration is NOT going to work.

But, thanks to webfonts you CAN do it… problem is each browser wants a different format (go standardization!) … TTF, EOT, SVG, WOFF…

Thankfully there’s a website called fontsquirrel that has a free service where you can upload a font, it makes all those for you, and even gives you an example CSS with that in a nice neat .zip download.

Font Squirrel | Create Your Own @font-face Kits

Works like a charm.

One thing – to work properly in all browsers the @font-face declaration must be the FIRST thing in your CSS. Just keep that in mind.

3

Thanks deathshadow

I went to the site and the font generator page but it wouldn’t accept any ttf fonts I selected from my WINDOWS/Fonts folder. I only (chose one font.)

I looked at the help page to no avail.

Any ideas?

thanks

4

If you are trying to use a font that CAME WITH Windows, or are under copyright you are NOT allowed to use those on websites. You may have to go find an alternative. Many various older fonts are under similar restrictive licensing where the original owners are basically being *****s about it – in many cases some 50 years after they started making money off them. See the ‘classic’ families like lucida for example.

If fontsquirrel is telling you “this is a microsoft font” and they won’t convert it, it means you really shouldn’t be trying to make a distributable font out of it legally.

So, options? Well, Fontsquirrel has a nice library of open license/free to use fonts to choose from.
Font Squirrel | Download Hundreds of Free @font-face Fonts

That thanks to their review process are unlikely to come back and bite you on the posterior legally. You’d be AMAZED how some companies get their panties in a bunch if you use their fonts without permission.

I would suggest choosing one of those… might not be what you intended, but from a legal standpoint it’s the best option.

… and yes, it’s really, REALLY, REALLY stupid that it’s a legal/licensing issue over things that come basically for free with your OS and that microsoft even distributes free for use on linux; but break it out of their official ‘packaging’ and it’s crackdown time. Same goes for all the stuff in the adobe type library… Which you can “buy” to use as much as you want for print, or even inside a image, but convert it to a webfont for use on your website and the lawyers come a knocking.

Old world vs. New World… Thankfully we have some fairly talented folks putting out fonts now that are “new world” and “get it”…

5

Goggle also has a nice collection of fonts you can use:

Google Web Fonts

6

Yep!

It must be the licensing thing. No problem.

So I downloaded one fontKit from fontSquirrel, “Tangerine.”

Upon opening the zip file it had only the ttf Tangerine file. Nothing else.

Is this correct?

I placed this in a folder in the root tree named fonts.

I thought there was some sort of css code to use this font on my Internet site.

Something like @font-face declaration. Where can I find out about this?

What am I missing here?

Thanks.

Rick

7

Ok I looked at this page:


http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

I ended up with this:

@font-face {
  font-family: 'tangerine';
  src: url(/fonts/'tangerine.eot');
  src: local('☺'),
    url("tangerine.woff") format("woff"),
    url("tangerine.otf") format("opentype"),
    url("tangerine.svg#grablau") format("svg");
}

Now I’m not sure how to code this in the html page.

I sort of get it but then I read about different version of
css dropping or not supporting this.

All of this to get a clean font in a web page? Absurd!

WHAT DOES THIS ALL MEAN?

No wonder this is so frustrating.

Building a clean functioning web site should not invoke such convulsive rage!

Rick

8

There is a step by step tutorial here that may be of use.

Basically the code you posted is placed at the top of your stylesheet and then you would call your tangerine font in the same way that you would apply something like arial to an element.

body {font-family:tangerine, Arial, Verdana, sans-serif}