Ligature Symbols: Web Font gratis

por .

Ligature Symbols es otra web font gratuita, con una colección de iconos muy importante, y con una nivel de detalle que la convierten en una excelente opción a la hora de implementar un recurso de esta clase.

simbolos en formato web font

Ligature Symbols soporta los navegadores más modernos, tanto de escritorio como móviles (Chrome, Safari, Firefox, iOS – Mobile Safari, Android). Este detalle es importantísimo de cara a una buena compatibilidad cruzada entre los distintos dispositivos.

Ejemplo de uso:

Estructura HTML:

<!-- HTML -->

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

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

CSS:

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

.lsf {
font-family: 'LigatureSymbols';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
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:0.3em;
font-size:130%;
font-family: 'LigatureSymbols';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}

Este magnifico proyecto es un trabajo de Kazuyuki Motoyama, diseñador web radicado en Kyoto. El mismo comenta que para crear esta genial tipografía utilizo FontForge, un editor tipográfico que es open source.

Web: Ligature Symbols

Categorizado en: