Es muy común, cuando haces un proyecto para una gran empresa. El hecho de que tengan una tipografía corporativa.
Para que un navegador sea capaz de interpretar esa tipografía:
- Debe estar instalada en el equipo del usuario: Por ejemplo en Windows, suelen estar en C:\WINDOWS\Fonts
- Debe ser facilitadas por el servidor
La primera opción se podría llegar a plantear en entornos corporativos, pero cuando tenemos visitas o accesos de terceros, es impensable.
Con lo cual nos centraremos en la segunda opción, que nos serviría también para portales de Internet.
Existen multitud de soluciones. De hecho hasta ahora, en mi empresa se venía utilizando Cufon:
http://cufon.shoqolate.com/generate/
Es un sitio que básicamente consiste, en que subes el archivo de tipografía (.ttf) y el sitio te genera una serie de JavaScript. Los cuales subimos a nuestro portal y referenciamos desde el mismo.
Su funcionamiento es muy simple, consiste en pasarle como parámetros del JavaScript, los estilos que queremos que se les aplique Cufon, para que aparezcan con la tipografía deseada. Y Cufon convertirá dicha tipografía en una imagen.
Para su utilización bastaría con subir los archivos JavaScript al servidor y hacer una referencia a ellos dentro de la etiqueta <head> que tenemos en la página maestra (
master page):
<head runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<meta name="GENERATOR" content="Microsoft SharePoint"/>
<meta name="progid" content="SharePoint.WebPartPage.Document"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Expires" content="0"/>
<SharePoint:RobotsMetaTag runat="server"/>
<title id="onetidTitle"><asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server"/></title>
<SharePoint:CssLink runat="server" Version="4"/>
<SharePoint:Theme runat="server"/>
<SharePoint:ULSClientConfig runat="server"/>
<script type="text/javascript">
var _fV4UI = true;
</script>
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server"/>
<SharePoint:CustomJSUrl runat="server"/>
<SharePoint:SoapDiscoveryLink runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">
</asp:ContentPlaceHolder>
<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/images/favicon.ico"/>
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server"/>
<SharePoint:SPPageManager runat="server"/>
<SharePoint:SPHelpPageComponent Visible="false" runat="server"/>
<script type="text/javascript" src="/PublishingImages/cufon/cufon-yui.js"></script>
<script type="text/javascript" src="/PublishingImages/cufon/ClanPro-Book_450.font.js"></script>
<script type="text/javascript" src="/PublishingImages/cufon/ClanPro-Thin_250.font.js"></script>
<script type="text/javascript" src="/PublishingImages/cufon/ClanPro-Black_900.font.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
Al final de nuestra página maestra, antes de cerrar la etiqueta </body> deberiamos incluir la llamada al archivo JavaScript, pasandole como parámetros los estilos a los que le queremos aplicar Cufon y finalmente, llamar a la función que nos actualiza los estilos de Cufon:
<script type="text/javascript">
Cufon.replace('.menu-horizontal a', { fontFamily: 'ClanPro-Book' });
Cufon.replace('.titularCabecera', { fontFamily: 'ClanPro-Thin' });
Cufon.replace('.tituloMenuLateral, .ms-WPTitle, .ms-WPTitle a', { fontFamily: 'ClanPro-Black' });
Cufon.replace('.titularNoticia, .titularAviso, .titularComunicado, .cabeceraAviso a, .cabeceraComunicado a', {hover:true, fontFamily: 'ClanPro-Book' });
Cufon.replace('.subtituloNoticia, .cabeceraNoticia a, .tituloOtrasNoticias, .tituloAR, .subtituloAviso, .subtituloComunicado, .tituloOtrosComunicados, .tituloVisitas, .tituloAplicacion', {hover:true, fontFamily: 'ClanPro-Black' });
Cufon.now();
</script>
Esta solución tenía un problema y consistía en que si aplicábamos Cufon a un Editor de Contenido, cuando volvemos a editar dicho Editor de Contenido veremos que el código ha cambiado debido a la aplicación de Cufon y que hace que nos ralentice la edición de las páginas:
Y ya que los usuario tienen que poder editar dicho contenido de estos Editores de Contenido. Busque una alternativa.
La alternativa es Font-face. Es una propiedad de CSS, que nos permite hacer uso de una fuente, que no este en el equipo del usuario. Pero para sorpresa mía, Internet Explorer (de la versión 6 a la 8), no es capaz de interpretar los archivos ttf. Pero si es capaz de interpretar los archivos eot.
Para ello, lo primero que deberemos hacer es usar un conversor para tener ambos archivos. Personalmente hay dos que utilizo y que me han dado buenas conversiones:
http://www.kirsle.net/wizards/ttf2eot.cgi
http://www.fontsquirrel.com/fontface/generator
https://www.web-font-generator.com/
El segundo te habilita la descarga de un rar, donde se incluye la fuente en varios formatos y un html de ejemplo para que veas la transformación en el navegador que se desee.
En caso de que estos conversores no hagan la conversión deseada, bastaría con buscar alguno alternativo.
Tras obtener los dos archivos, los subimos a nuestro portal. E incluiremos en la hoja de estilos del sitios, la siguiente referencia:
<style type="text/css">
@font-face {
font-family: NombreUtilDeLaFuente;
src: url("http://servidor/subsitio/carpeta/Nombredelarchivodelafuente.eot");
src: url("http://servidor/subsitio/carpeta/Nombredelarchivodelafuente.ttf");
}
</style>
Ahora ya sólo tendríamos que utilizar dicha fuente, en los estilos que nos interese, simplemente utilizando su NombreUtilDeLaFuente:
<style type="text/css">
.NavegacionLateral {
font-family: NombreUtilDeLaFuente;
font-size:18pt;
}
</style>
Puede que en función del navegador que utilicemos, no nos valga sólo con la fuente en formato eot o ttf y necesitemos otras extensiones.Para ver más detalles podemos consultar:
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
https://css-tricks.com/snippets/css/using-font-face/
