Web Fonts: Difference between revisions

Latest revision as of 14:42, 17 March 2009

Through the "@font-face" "@rule" in CSS.

Supporting browsers:

Opera
Safari on mac & windows (and linux through wine!?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Loki";
        src: url("LOKICOLA.TTF")
      }
      H1 { font-family: "Loki", monospace; font-size: 128px }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> This heading is displayed using NotCourier</H1>
  </BODY>
</HTML>

@@ Line 15: / Line 15: @@
      <STYLE TYPE="text/css" MEDIA="screen, print">
        @font-face {
-         font-family: "Robson Celtic";
+         font-family: "Loki";
-         src: url("http://site/fonts/rob-celt")
+         src: url("LOKICOLA.TTF")
        }
-       H1 { font-family: "Robson Celtic", serif }
+       H1 { font-family: "Loki", monospace; font-size: 128px }
      </STYLE>
    </HEAD>
    <BODY>
-     <H1> This heading is displayed using Robson Celtic</H1>
+     <H1> This heading is displayed using NotCourier</H1>
    </BODY>
 </HTML>
 </source>