Pues lo explicaré pero, Gabriel, prométeme que publicarás un tutorial nuevo y mejor explicado, pues yo carezco de esas habilidades a la hora de detallar un proceso
Es necesario que la misma fuente esté en todos los formatos que necesitan cada uno de los distintos navegadores. Aquí dejo la lista de los tipos de fuentes aceptados por navegador:
Internet Explorer versión mínima: 4.0 => Fuentes: .eot (Embedded Open Type)
FireFox versión mínima: 3.5 => Fuentes: .ttf (True Type) y .otf (Open Type)
FireFox versión mínima: 3.6 => Fuentes: .woff (Web Open Font Format)
Opera versión mínima: 10.0 => Fuentes: .ttf (True Type) y .otf (Open Type)
Safari (WebKit) versión mínima 3.1 => Fuentes: .ttf (True Type) y .otf (Open Type)
La manera en cómo se obtienen las fuentes es prácticamente automatizada, ya que de una vez se obtiene también el código CSS listo para insterlo en nuestro estilo. Se hace utilizando esta útil y muy reconocida herramienta:
http://www.fontsquirrel.com/fontface/generator
Aclaro que solo se pueden utilizar fuentes .ttf o .otf en el generador. Se sube la fuente a utilizar, el generador hace su trabajo y crea el resto de tipos de fuentes que necesitamos. Para descargarla, por defecto aparecerá en básico (Basic) o en óptimo (Optimal), pero se tiene que hacer en modo Experto (Expert...), en donde se desplegarán una serie de opciones, de las cuales solo modificaremos
CSS Formats, y la cambiaremos a
Bulletproof (Original). Tiene que ser algo así:
Una vez hecho ese cambio, marcamos la casilla que sigue y la que se lee
"Yes, the fonts I'm uploading are legally eligible for web embedding", y clic en el botón para descargar nuestro kit, el cual contiene los archivos de fuentes, más una hoja de estilo, y una archivo html como página de prueba para verificarla desde un navegador.
Solo necesitaremos los tipos de fuentes para subirlas al servidor y el código en el CSS para incluirlo en nuestro propio estilo. Creamos una carpeta en el servidor dentro del foro, puede ser en el directorio raíz, puede ser dentro del estilo, no importa pues la ruta del archivo se modifica en el CSS. Subimos los tipos de fuentes, 4 en realidad (.eot, ttf, woff, svg) y a continuación copiamos el código en el CSS. En mi caso, estoy usando la fuente Marydale Bold, y en la hoja de estilo del kit me da este código:
Código: Seleccionar todo
@font-face {
font-family: 'MarydaleBold';
src: url('marydale-bold-webfont.eot');
src: local('Marydale'), local('MarydaleBold'), url('marydale-bold-webfont.woff') format('woff'), url('marydale-bold-webfont.ttf') format('truetype'), url('marydale-bold-webfont.svg#webfontHoyDQHTK') format('svg');
font-weight: normal;
font-style: normal;
}
En lo personal, yo creé un archivo CSS aparte solo para las fuentes en los elementos del tema, al que nombré
fonts.css y en donde pegué el código. Solo basta modificarlo según la ubicación de los archivos de fuentes. Yo los tengo en directorio del tema en una carpeta a la que nombré
font, por lo que la modificación me quedó así:
Código: Seleccionar todo
@font-face {
font-family: 'Marydale';
src: url('{T_THEME_PATH}/font/marydale-bold-webfont.eot');
src: local('Marydale'),
local('MarydaleBold'),
url('{T_THEME_PATH}/font/marydale-bold-webfont.woff') format('woff'),
url('{T_THEME_PATH}/font/marydale-bold-webfont.ttf') format('truetype'),
url('{T_THEME_PATH}/font/marydale-bold-webfont.svg#webfontHoyDQHTK') format('svg');
font-weight: normal;
font-style: normal;
}
Para terminar con el CSS, incluímos el archivo fonts.css en la hoja del estilo. Abrimos
stylesheet.css y buscamos:
Y justo después agregamos:
Solo nos falta modificar los archivos de la plantilla para agregar la opción en el listado de fuentes de nuestros BBCodes. Este enredado tutorial se basa en el uso del ABBC3, así que buscamos el archivo que Gabriel menciona arriba:
posting_abbcode_buttons.html y buscamos:
Código: Seleccionar todo
<option style="font-family: Script MT Bold;" value="Script MT Bold">Script MT Bold</option>
Después agregamos:
Código: Seleccionar todo
<option style="font-family: MarydaleBold;" value="MarydaleBold">Marydale Bold</option>
Para finalizar, guardamos los cambios. Actualizamos elementos de plantilla y de tema desde el ACP, limpiamos caché, refrescamos el navegador, ¡y listo! Ya tenemos nuestra fuente instalada en el servidor, y agregada a la lista de fuentes del ABBC3 para los mensajes, de manera que el usuario puede visualizarla sin necesidad de tenerla instalada en su PC.
Se pueden agregar cuantas fuentes necesitemos.
Una vez las fuentes en el servidor, no solo se usan en los mensajes, también en el estilo en sí. ACLARO: No se recomienda utilizar las fuentes embedidas para crear títulos, ya que los navegadores no son editores de imágenes, el texto no se renderiza y se observan detalles poco atractivos cuando se les aumenta el tamaño. Para eso, siempre se debe utilizar el método antiguo de generar un archivo de imagen. Ejemplo en mi portal, en el bloque de bienvenida:
http://www.diabeteshispano.org
Gabriel, por favor, revisa estos apuntes, pruébalos y si te funcionan, te agradeceré que publiques un tutorial mejorado y más estético en el foro respectivo.
Saludos,
