Aca comparto un tutorial de como instalar tipografias en Linux, Mac, Windows y en tu web
aprende a instalar tipografias

para Windows

link: https://www.youtube.com/watch?v=N-ixXFLhHEw

https://www.youtube.com/watch?v=cyAcadPHM3o

link: https://www.youtube.com/watch?v=cyAcadPHM3o


Para Linux
probaremos con esta
http://trincheracreativa.com/ChavezPro_TC.rar


la descargamos, para abrila nescecitamos p7zip, y Ark
Tenemos que instalar un programita muy ligero que hace muy snecillo su uso, se llama gnome-font-viewer, y asi se instala

RfRemix, CENTOS "vale para RHEL y Fedora"
[color=#000000]
yum install gnome-font-viewer
[/color]


OpenSUSE
[color=#000000]
zypper in gnome-font-viewer
[/color]


Debian, Mint, Canaima
[color=#000000]sudo apt-get install gnome-font-viewer
[/color]


Ahora descargamos la fuente y la extraemos
fuentes

Ya esta lista para instalar
tipografias
instalar fuentes

y le decimos abrir con "gestor de tipografias" y hacemos click en "instalar", ahora podemos verla en las apps como libreoffice writer
fuentes web



En Mac

link: https://www.youtube.com/watch?v=LkkZ6RSKMIY


en la web

en la web, para controlarla podemos usar webfontloader, nota esto va dentro de las etiquetas <head></head>


 <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
//inserte javascript acá//
</script>


y asi la usamos para fuentes perzonalizadas

$(document).ready(function() {

            WebFont.load({
                    custom: {
    families: ['Komisar', 'Chavez'],
    urls: ['fonts.css']
  },
                loading: function() { },
                active: function () { window.init(); },
                inactive: function() { }
            });

        });


y fonts.css tiene

@font-face {
    font-family: "Komisar";
    src: url('komisar.ttf') format('truetype');
}
@font-face {
    font-family: "Chavez";
    src: url('Chavez.ttf') format('truetype');
[code]

usus eventos son: loading: function() {},
active, es para cuando [b]todas las fuentes del cargador[/b] "fonts.css" estan cargadas
loading para cuando las fuentes del cargador estan cargando

inactive si alguna fuente presenta error, se pone ls security fonts para que funciones, a cosa de la elegancia, se dispara si en 5 segundos no estan listas

fontoading se dispara cada vez que una fuente se carga

fontactive cada vez que una fuente esta lista

y fontinactive cada vez que una fuente da error, se dispara si falla durante 5 segundos

[code]
  active: function() {},
  inactive: function() {},
  fontloading: function(familyName, fvd) {},
  fontactive: function(familyName, fvd) {},
  fontinactive: function(familyName, fvd) {}



El elemento timeout permite controlar el tiempo de espera antes de que se dispare
asi se usa

$(document).ready(function() {

            WebFont.load({
                    custom: {
    families: ['Komisar', 'Chavez'],
    urls: ['fonts.css']
  },
                loading: function() { },
                active: function () { window.init(); },
                inactive: function() { }
            });
                     timeout: 9000
        });

le damos 9 segundos antes de se dispare, aca usamos el modulo "custom", que permite fuentes tuyas, ahora los modulos de terceros


Fontdeck
xxxxx es el numero de la fuente


WebFontConfig = {
  fontdeck: {
    id: 'xxxxx'
  }
};


fonts.com


WebFontConfig = {
  monotype: {
    projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    version: 12345 // (optional, flushes the CDN cache)
  }
};



google

WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif:bold']
  }
};



Typekit "adobe fonts"

WebFontConfig = {
  typekit: {
    id: 'xxxxxx'
  }
};


Esta libreria es soportada si el navegador soporta font-face, si no la soporta el evento "inactive" se dispara

de donde descargarlas?

http://www.urbanfonts.com/
http://fontspace.com/
fontspace.com
http://www.fontriver.com/
http://www.fontsquirrel.com/