Ligature kudakurage Symbols

Logos

HTML & CSS

Please copy and paste this code to your HTML or CSS

HTML

<p>Simple use for mailto link.</p>
<a href="mailto:mail@example.com" class="lsf">mail</a>

<p>Use the icon with text.</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>

<p>Use the icon with unicode.</p>
<a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a>

CSS

@font-face {
    font-family: 'LigatureSymbols';
    src: url('LigatureSymbols-2.11.eot');
    src: url('LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('LigatureSymbols-2.11.woff') format('woff'),
         url('LigatureSymbols-2.11.ttf') format('truetype'),
         url('LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.lsf, .lsf-icon:before {
    font-family: 'LigatureSymbols';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.lsf-icon:before {
    content: attr(title);
    margin-right: .3em;
    font-size: 130%;
}

.lsf-icon.amazon:before {
    content: '\E007';
}

Download

How to make this font ?

Ligature Symbols is to display the symbol with a ligature features. I created this font by using FontForge (open source postscript font editor).
If you want to learn more, you may read my blog entry.

About me

Copyright © 2012 kazuyuki motoyama (kudakurage)