CSS Unusual Font

Question

Possible Duplicate:
How to add some non-standard font to a website?

I created a website, and in my CSS file Im using a font downloaded from web, it works nice in windows, I can use it on my website, but if I run my page on Linux, of course it do not work because Linux dont know that font, so my question is, if I will put my page on some server, I need to "install" that font on server or something like that, or how does it works?

you are hosting your own font? see this: http://www.fontsquirrel.com/fontface/generator — Scott Simpson, Jan 25 '13 at 12:00
you need to upload the font to the directory where your other html/css/image files are located and give correct references — defau1t, Jan 25 '13 at 12:00

score 1 · Accepted Answer · answered Jan 25 '13 at 12:01

You need to create web-compatible formats (different browsers require different formats) of your font and then use a @font-face rule in your stylesheet to include it. For example (this is the output generated by http://fontsquirrel.com):

@font-face {
    font-family: "YourFont";
    src: url("YourFont.eot");
    src: url("YourFont.eot?#iefix") format("embedded-opentype"),
         url("YourFont.woff") format("woff"),
         url("YourFont.ttf") format("truetype"),
         url("YourFont.svg#YourFont") format("svg");
    font-weight: normal;
    font-style: normal;
}

The browser will then download the appropriate font file and use that.

score 1 · Answer 2 · answered Jan 25 '13 at 12:02

Fonts are dependent on what font the client has installed. There's no use on installing the font on the server.

With CSS3 (not supported by all browsers), you can use the @font-face CSS property in order to use custom fonts. Another solution for custom fonts would be the use of Google Webfonts. Otherwise, just go for any web safe font.

score 0 · Answer 3 · answered Jan 25 '13 at 12:03

If you use a font that is possible not recognized by all systems, you will have to include matching font files on the web server. You can register these fonts using CSS's @font-face property.

Try to register a font in multiple formats (like TrueType and OpenType). It's also good practice to provide some fallback fonts which are widely available, like Times New Roman or Arial.

CSS Unusual Font

3 Answers3