Celtic title font in web form

a b c

This is a title font I made using public domain Celtic art and designs. It is intended as a title font and therefore lacks numbers and some other characters. I recommend using lower-case characters only (they look nicer). I made both lower-case and upper-case the same so that you can pick and choose. The font above is the web HTML-friendly version of the font and can be used on your web page as plain-old HTML/CSS. Alternatively, get the full TrueType (.ttf) form and use it in your applications.

The entire font, lowercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

The entire font, uppercase

a b c d e f g h i j k l m n o p q r s t u v w x y z

How to use the font in CSS/HTML

Download the ZIP of font source files. I explain everything and included the CSS code to make the letters flow nicely.
Put them anywhere on your website and navigate to the index page where there are examples of the web font in use. Tweak the page to your heart's content.

The CSS will look something like this

Note that the extra line for SVG is intended to fix an annoying Chrome bug. Read this article on the Chrome font rendering issue. I followed the steps and fixed the font rendering issue for me. I am not sure if the extra svg is necessary. I am still investigating!

@font-face{ 
 font-family: 'foncy_celtic_fontregular';
 src: url('foncyceltic-webfont.eot'); /* IE9 Compat Modes */
 src: url('foncyceltic-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('foncyceltic-webfont.woff2') format('woff2'), /* Modern Browsers */
      url('foncyceltic-webfont.woff') format('woff'), /* Modern Browsers */
      url('foncyceltic-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
 font-style: normal;
 font-weight: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'foncy_celtic_fontregular';
    src: url('foncyceltic-webfont.ttf') format('truetype'); /* Safari, Android, iOS */
  }
}

The HTML will look something like this

I recommend using one letter at a time and adding whatever margin is necessary. Someday I will fix the margin in the font itself! Don't worry, all the details are included in the ZIP file.

<span class="celtic">abc</span>
<span class="celtic uppercase">ABC</span>
<span class="celtic addmargin">y</span>

Other fonts by Kristen

Learn how to make your own web fonts. Follow the step by step instructions and see example code.
Use fontsquirrel to download as many custom fonts as you like, and convert them to web format for your website.
See more fonts by Kristen, including a curlicue font and a beads font.

But wait, I want the True Type Font

The true type font is typically what you would install on your computer to use in Word, Photoshop, and other applications.
Download only the TrueType font and do what you want with it.