Lectora //

Tutorial: ¡Personaliza tu tipografía en Lectora!

Lectora es un software de diseño de módulos e-learning muy avanzado. Es fácil de usar y ofrece muchas posibilidades de creación personalizada. Por ejemplo, puedes integrar tu Lectora una tipografía externa.
Por lo tanto, puedes integrar cualquier tipografía descargada de internet o tus proprias tipografías corporativas. Así, puedes personalizar gráficamente tus módulos. La fuente integrada queda “incrustada” en el módulo, por lo que no es necesario instalarla en el dispositivo del usuario final.
Aquí te compartimos un tutorial de los pasos a seguir para integrar correctamente tu tipografía en Lectora

Paso 1 : Crea una carpeta de webfonts en la carpeta del módulo

Empieza creando una carpeta “webfonts” el la carpeta del módulo.

capture webfonts

Luego, copia en esta carpeta tus archivos de la tipografia que quieres instalar. Esto debe estar en el formato .woff. Si tu tipografía no es de este formato, puedes usar un convertidor de tipografía como convertio.co.

capture stylesheets

También debes crear un archivo llamado “stylesheet”, esta vez en formato .css. Para ello, puedes utilizar el software NotePad; puedes descargarlo de forma gratuita.

En esta carpeta, integra este código:

@font-face {
    font-family: 'RalewayRegular';
    src: url('RalewayRegular.woff2') format('woff2'),
         url('RalewayRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Paso 2 : Inserta una extension html

Nombre : FONT

Tipo : Balises méta

Carpeta : Ninguna

 

Código a insertar:

<link rel="stylesheet" href="webfonts/stylesheet.css" type="text/css" charset="utf-8">

 

Luego, selecciona « Carpetas suplementarias »

capture fichiers supplémentaires

Haz clic en « agregar un archivo” y selecciona el archivo “webfonts”:
capture webfonts

Paso 3 : Agrega un archivo style.css a la base de la carpeta del módulo

De la misma manera que para el archivo stylesheet.css, crea un archivo style.css

capture style.css

En este archivo, inserta el siguiente código (ejemplo para 2 tipos diferentes, uno normal y otro en negrita):

.raleway {    
          font-family : RalewayRegular!important;
}

.raleway p{  
          font-family : RalewayRegular!important;
}

.raleway span{       
          font-family : RalewayRegular!important;
}


.ralewaybold {        
          font-family : RalewayBold!important;      
}

.ralewaybold p{      
          font-family : RalewayRegular!important;
}

.ralewaybold span{ 
          font-family : RalewayRegular!important;
}

Luego inserta una extension html :

Nombre: CSS

Tipo: Hoja de estilo en cascada

Archivo: (obtenga el estilo CSS)
Atención, debes volver a cargar el style.css con cada modificación.
capture css

Paso 4 : Escoge el nombre de tu tipografía

Selecciona el texto y haz clic en Propiedad > Apariencia

capture nom typographie

capture classes css
Aquí se trata del nombre puesto en style.css

.raleway {  
        font-family : RalewayRegular!important;
}

Attention :

Cuando publicas el módulo, debes colocar manualmente la carpeta webfonts / stylesheet.css / styles css en el mismo lugar de origen.
Es preferible verificar que la carpeta está en su lugar en cada nueva publicación.

 

Si tienes alguna pregunta, no dudes en contactarnos !