I recently came across a web page using the font “ff-tisa-web-pro-1” (specified in their CSS file).
How does that work? I definitely don’t have this font on my computer, yet it was displayed.
Non-Standard fonts in web?
If you want more than guesses, you should give us your browser (and version) and the website. –
Sargassum
You can use CSS to embed fonts in web-pages.
Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!
Wow that's an old article :) Glad Netscape Navigator is on the ball –
Titty
Edited to link to newer article. –
Frances
Changed my down vote to a up vote after change to recent article :) –
Kat
-1 because the site in question actually uses TypeKit, and the answer is too simple. –
Husserl
As Simon pointed out, the CSS @font-face declaration can be used to implement traditionally non-web-safe fonts on your site. If you want to try it yourself, definitely check out Paul Irish's now famous bulletproof font face implementation, which links to FontSquirrel's font file generator. It's now supported cross-browser with the right implementation, although with most fonts you'll have to deal with licensing, and consistent rendering is still an issue.
The site you asked about though uses Typekit, one of several new services that will host and serve font files for you (for a fee), and offers you an easy implementation that masks the complications of @font-face. Google's Font API is similar, although it's free and only hosts/serves a small selection of free fonts.
Also, non-native alternative techniques for embedding fonts have been around for a while (although they wouldn't be indicated in the CSS), see cufon and sIFR.
You can use CSS to embed fonts in web-pages.
Want to get away from ‘Web Safe’ fonts for some attractive headers AND do it without using an image? Use CSS 3 and embed a font-face!
Wow that's an old article :) Glad Netscape Navigator is on the ball –
Titty
Edited to link to newer article. –
Frances
Changed my down vote to a up vote after change to recent article :) –
Kat
-1 because the site in question actually uses TypeKit, and the answer is too simple. –
Husserl
Here's a sample page I was playing around with recently to view math formulas in Firefox. The part you are (likely) most interested in is the css @font-face declaration at the top, and the style="font-family: DejaVu Serif Web;" assigned to the <div> and <math> tags.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>mathy fonts test</title>
<style type="text/css">
@font-face {
font-family: DejaVu Serif Web;
src: url(/fonts/DejaVu/ttf/DejaVuSerif.ttf) format("truetype");
}
</style>
</head>
<body>
<h1>DejaVu Serif</h1>
<div style="font-family: DejaVu Serif Web;">
<p>
Nulla eu commodo neque. Donec nec nisi libero. Integer sollicitudin leo
vel arcu elementum mattis. Vivamus eu sodales odio. Curabitur eu auctor
leo. Pellentesque adipiscing nulla iaculis ante commodo aliquet. Donec
egestas tincidunt tincidunt. Nunc ut condimentum orci. Aenean in egestas
tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Curabitur suscipit, sapien ut dignissim
pellentesque, lacus risus facilisis odio, et tristique nunc quam et
mauris. Quisque pellentesque nulla et dui bibendum suscipit. Aenean
consectetur adipiscing nulla, a molestie nunc semper non. Quisque at
ipsum quis turpis gravida commodo et vel felis. Integer lobortis augue
eu tortor aliquet nec mattis nulla aliquam. Sed ornare cursus urna et
congue.
</p>
<p>
<math style="font-family: DejaVu Serif Web;" mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−<!-- − --></mo>
<mi>b</mi>
<mo>±<!-- ± --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−<!-- − --></mo>
<mn>4</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
<mo>⁢<!-- ⁢ --></mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢<!-- ⁢ --></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>
</div>
</body>
</html>
If viewing locally, it has to be saved as .xhtml, not just .html, which got me for a bit. This is, of course, related to the math-y stuff, not the font-face, so it's only a note if you're trying to use this code whole.
There's a decent list of fonts you can (legally) embed in your document here.
Typekit also provides a nifty way to embed fonts that do require licensing deals with type foundries. They currently offer the ability to use one font (of your choice) for free.
Font linking has been in browsers for quite some time; the issue was with what format you could use. Microsoft, of course, supported a proprietary font format, and Mozilla did not. sigh
Not sure how this plays with the legal side of things, but the FontSquirrel generator includes a flag that mangles the font in such a way that it cannot be installed or used as a desktop font. Of course, they still require you to state that you have the right to distribute the font... –
Catinacation
The Google Font Directory is an interesting resource for understanding the direction web fonts are moving in:
Google recently released Font API, it might be of some use to you.
© 2022 - 2024 — McMap. All rights reserved.