1

I've designed an HTML page on a local host using a sans-serif font, and I've attempted to move my code to a Unix/Linux server so I can use crontabs to generate the page at specific times.

However, I want to use a sans-serif font. This is simple to do at first, just using:

    body {
        zoom: 23%;
        font-family: Verdana, Arial, Helvetica, sans-serif;
    }
    #multiLine {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        width: auto;
        margin: auto;
        text-align: center;
        position: absolute;
        top: 0px;
        right: 0px;
    } ...

As soon as I push the code to Linux and attempt to render the file, the fonts never match up correctly and it just returns the page in a clunky looking (with no commas) Linux default font.

Does anyone know how to use CSS on Linux and have it use a font of my choosing? I tried basic CSS, but it never works, and font-face doesn't seem to have access to any files.

fedorqui
  • 275,237
  • 103
  • 548
  • 598
Zack Downey
  • 11
  • 2

2 Answers2

0

Linux equivalents for Verdana: DejaVu Sans, Bitstream Vera Sans, Tahoma, Kalimati

Try:

{font-family : Verdana, "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif;}

and see this link for more details

Okba
  • 773
  • 6
  • 11
0

Verdana and Arial are Windows-specific legacy fonts — you won't find them on Linux for licensing reasons (or very old never fixed versions that Microsoft briefly published in RO mode in the 90's to help IE kill Netscape, and that some people still install manually).

Helvetica is an even older legacy font. If it matches on the system it will likely match 80's or 70's era fonts with limited encoding coverage, little screen optimization, etc.

Sometimes Arial and/or Helvetica are aliased to other fonts on Linux. When that's the case the alias target is chosen for metric compatibility (same symbol sizes and proportions as the original font) not prettyness or encoding coverage. Those aliases are intended to help render legacy pages that depend on exact pixel dimensions, not to be pretty.

Kill your css stack and just specify sans-serif if you don't want to dig into system font specifics. What poisons your rendering is the Arial/Helvetica references.

Otherwise you need to follow which sans-serif font is popular and available a given year on your target system. Dejavu Sans has been a pretty safe bet for quite a long time. That may change in the future. Its metrics (symbol proportions) are quite different from Arial and Helvetica. Modern for-screen fonts tend to be wider than legacy fonts that targetted cramped paper output.

nim
  • 2,345
  • 14
  • 13