Diferencia entre revisiones de «Como añadir fonts personalizados dentro de un tema»

De MoodleDocs
(tidy up)
(tidy up)
 
(No se muestra una edición intermedia del mismo usuario)
Línea 6: Línea 6:
* Dentro del archivo CSS de sus temas añada lo siguiente:
* Dentro del archivo CSS de sus temas añada lo siguiente:


     @font-face { /* en donde FontName y fontname representan el nombre del tipo de letra que Usted quiere añadir */
     @font-face { /* en donde FontName y fontname representan el nombre del tipo de letra para añadir */
       font-family: 'FontName';
       font-family: 'FontName';
       src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>);
       src: url(<nowiki>[[font:theme|fontname.eot]]</nowiki>);
Línea 17: Línea 17:
     }
     }
      
      
* Después añada el nombre de su tipo de letra en donde Usted quiera que se use ese tipo de teltra en su hoja de estilo (''stylesheet'')
* Después añada el nombre de su tipo de letra en donde Usted quiera que se use ese tipo de letra en su hoja de estilo (''stylesheet'')
* Por ejemplo:
* Por ejemplo:
     #page-header h1 { font-family: FontName;}
     #page-header h1 { font-family: FontName;}

Revisión actual - 13:58 18 abr 2015

Nota del traductor: La palabra inglesa fonts significa tipo de letra, pero a menudo se traduce erróneamente como fuentes o se emplea la misma palabra fonts en español.


  • Cree un nuevo directorio (carpeta) dentro de su tema y póngale por nombre fonts. Por ejemplo: moodle/theme/sutema/fonts
  • Añádale a este directorio todos sus tipos de letra (fonts) personalizados.
  • Dentro del archivo CSS de sus temas añada lo siguiente:
   @font-face { /* en donde FontName y fontname representan el nombre del tipo de letra para añadir */
     font-family: 'FontName';
     src: url([[font:theme|fontname.eot]]);
     src: url([[font:theme|fontname.eot]]) format('embedded-opentype'),
          url([[font:theme|fontname.woff]]) format('woff'),
          url([[font:theme|fontname.ttf]]) format('truetype'),
          url([[font:theme|fontname.svg]]) format('svg');
     font-weight: normal;
     font-style: normal;
   }
   
  • Después añada el nombre de su tipo de letra en donde Usted quiera que se use ese tipo de letra en su hoja de estilo (stylesheet)
  • Por ejemplo:
   #page-header h1 { font-family: FontName;}