LucasFonts

Webfonts

For many years web designers were limited to a handful of system fonts like Arial, Verdana or Georgia. In 2009 most web browsers started supporting different technologies that allow for fonts to be embedded directly into web sites using the CSS ‘@font-face’ rule. This is why presently, for the first time it is possible to set scalable and indexable text using individual typefaces.

LucasFonts webfonts

Our webfonts are TrueType fonts which we offer in two different web formats: Embedded OpenType EOT and the new Web Open Font Format WOFF. Those two formats allow to use our webfonts in current versions of all major browsers. The table below shows the support of different webfont formats in different browser versions.

Display performance

Due to the various rasterizers that are at work inside the different operating systems webfonts will not be displayed with the same consistent quality across different browsers. To ensure optimal on-screen performance in all browsers our webfonts are carefully hinted. LucasFonts has over 10 years of experience in producing high-quality TrueType fonts for the office environments.

Embedding EOT and WOFF

The embedding of webfonts takes place in the CSS document. Due to the varying support of different font file formats in different browsers each webfont has to be embedded twice. This means that for the time being two declarations are necessary, one for InternetExplorer, and one for browsers that support WOFF.

Your CSS should look like this:

@font-face {
font-family: MyFont;
src: url(/fonts/TheSansWeb.eot);
}

@font-face { font-family: MyFont; src: url(/fonts/TheSansWeb.woff) format("woff"); }

Now you can add the embedded font to your CSS tags. Don’t forget to specify alternative fonts for browsers without support for the WOFF format:

body {
font-family: MyFont, Verdana, sans-serif;
}

Embedding EOT, WOFF and SVG

Dealing with three formats is a bit more complicated:

@font-face {
font-family: MyFont;
src: url(/fonts/TheSansWeb.eot);
src: local(TheSansWeb),
url(/fonts/TheSansWeb.svg#TheSansWeb) format("svg"),
url(/fonts/TheSansWeb.woff) format("woff");
}

body {
font-family: MyFont, Verdana, sans-serif;
}

Purchase LucasFonts webfonts

Our webfonts are currently only available by phone or e-mail order. We are looking forward to offer them in our online shop soon.