Como cambiar la fuente o tipo de letra en OpenCart o Prestashop con @font-face. Como usar @font-face, CSS

La respuesta rápida:

OpenCart, vas a editar el archivo stylesheet.css que esta en /catalog/view/theme/default/stylesheet/stylesheet.cssLa línea que vas a editar es la número 9, vas a reemplazar la línea que dice ‘font-family: Arial, Helvetica, sans-serif‘Digamos que quieres usar una fuente monospace, entonces reemplazas esa línea así:

font-family: Monaco, Lucida, monospace

PrestaShop, vas a editar el archivo global.css que esta en /themes/default/css/global.css
La línea que vas a editar es la número 54, vas a reemplazar la línea que dice ‘font:normal 11px/14px Arial, Verdana, sans-serif;
Digamos que quieres usar una fuente monospace, entonces reemplazas esa línea así:

font:normal 11px/14px Monaco, Lucida, monospace;

WordPress, vas a editar el archivo style.css que esta en /wp-content/themes/tema_que_estas_usando/style.css
La línea que vas a editar es la número 21, vas a reemplazar la línea que dice ‘font: 12px/18px Arial, Helvetica, Sans-serif;
Digamos que quieres usar una fuente monospace, entonces reemplazas esa línea así:

‘font: 12px/18px Monaco, Lucida, monospace;

La respuesta larga

CSS @font-face

@font-face es un seudo-elemento de CSS que bajara una fuente en el navegador en el caso de que el visitante a tu página no la tenga pre-instalada. Esto no quiere decir que la fuente quede instalada en el computador de tu visitante, no! solamente va a bajar la fuente en el navegador mientras dure la sesión. Esto es fantástico porque ya no tenemos que depender mas de las 4 o 5 fuentes que están instaladas en los sistemas operativos mas usados.

Si no sabes como añadir CSS a tu website, lee primero esta breve introducción.

@font-face tiene soporte de los navegadores mas usados, Chrome, Firefox e Internet Explorer. Opera todavia no da soporte a esta regla de CSS pero parece ser que la próxima versión ya estará lista para usar @font-face.

Las opciones básicas para usar @font-face son fáciles de usar e interpretar, es como si estuvieramos enlazando alguna imagen. Esta sería la inicialización mas común y básica:

@font-face { font-family: Graublaw; src: url(GraublauWeb.otf); font-weight:400; }
  • font-family: Es el tipo de letra o fuente que vas a usar.
  • src: Es el la ruta al archivo donde tu navegador va a buscar la fuente o tipo de letra.
  • font-weight: Es una de las otras muchas opciones que puedes darle al tipo de letra, en este caso la negrilla.

Ahora digamos que quieres cambiarle el estilo de letra a toda la página, bien, pues debes crear una regla de CSS así:

body { font-family: Graublaw, Helvetica, Arial, sans-serif; src: url(GraublauWeb.otf);}

Donde ‘body‘ es el elemento al cual le queremos aplicar ese cambio, ‘body‘ controla el estilo de toda la página. En el ejemplo anterior establecimos a Graublaw como la fuente a usar en toda la página.

Como cambiar la fuente en OpenCart

Como lo he explicado, la fuente se cambia haciendo modificaciones al documento con CSS, en OpenCart el archivo encargado de manipular el CSS es “stylesheet.css“, este archivo usualmente esta ubicado en: “/catalog/view/theme/default/stylesheet/stylesheet.css“, en este archivo definimos los cambios visuales que vamos a hacer en la página, en este caso definimos la fuente que deseamos y el elemento que debera usar esta fuente. Asi, entonces, definiras la primera regla de @font-face que es escoger la fuente y la dirección URL donde vive la fuente, luego defines los elemento que la van a usar, por ejemplo:

body {font-family: Graulaw, Helvetica, Arial, sans-serif; src: url(GraublauWeb.otf);}

En el ejemplo anterior, estamos cambiando la fuente general de todo el sitio, porque hemos afectado el elemento <body>, tambien si hubiéramos querido, podemos modificar cualquier otro elemento o bloques determinados usando <div>s o <span>s.

Como cambiar la fuente en Prestashop

En Prestashop hay varios archivos encargados de manipular las reglas de CSS, muchos archivos son dependientes a cada modulo que tiene Prestashop, pero hay un archivo en particular que define las reglas generales para todo el sitio, este se llama: “global.css”, esta ubicado en: “/themes/default/global.css“. Siguiendo las mismas instrucciones que usamos para Opencart,  vamos a definir la fuente que queremos usar y el elemento o elementos que van a usar esa fuente, asi de simple.

Ahora se preguntaran, que fuentes pueden usar? Bueno, pues puedes usar:

TTF, EOT, OTF, AFM, CFF, FFIL, LWFN, FON, PFB, PFM, WOFF, STD, SVG, PRO, XSF, y la lista es interminable.

Donde puedes encontrar fuentes para usar en tu website?

  • http://www.fontsquirrel.com
  • http://www.theleagueofmoveabletype.com
  • http://www.100besteschriften.de/

Como siempre, si tienen dificultad o si tienen preguntas, por favor dejen un comentario y con gusto les ayudaremos. Gracias

Deseas usar Google Fonts en tu página web?

En esta entrada te explicamos como usar Google Fonts…

3 thoughts on “Como cambiar la fuente o tipo de letra en OpenCart o Prestashop con @font-face. Como usar @font-face, CSS

  1. Para cambiar el estilo al contenido dentro de las etiquetas <h2> escribimos el mismo en la hoja de estilo y entre las {} agregaremos las modificaciones que queremos hacerle. En este ejemplo, un cambio de color y de tamaño de la fuente. Al no especificar un elemento sino todos los h2, estos estilos serán aplicados a todas las etiquetas h2 dentro de los documentos que estén vinculados a esta hoja de estilo.

  2. Esencialmente un estilo CSS es solo una regla que le dice al navegador como desplegar un elemento concreto de una pagina. Por ejemplo se puede crear una regla CSS para que todas las directivas etiquetadas con <h1> aparezca con altura de 36 pixeles, en fuente Verdana y cn color naranja. CSS puede resaltar tambien contenidos, añadiendo bordes, cambiando margenes e incluso controlando la posicion exacta de cada elemento de la pagina. Un estilo es, de hecho, la combinacion de dos elementos: la pagina web elemental que formatea el buscador (el selector) y las instrucciones de formato reales (el bloque de declaracion). Por ejemplo un selector puede ser un encabezamiento, un parrafo de texto, una foto, etc. El bloque de declaracion puede cambiarlo a texto azul, añadir un borde rojo en torno a un parrafo, poner la foto en el centro de la pagina: las posibilidades son infinitas.

  3. Esencialmente un estilo CSS es solo una regla que le dice al navegador como desplegar un elemento concreto de una pagina. Por ejemplo se puede crear una regla CSS para que todas las directivas etiquetadas con <h1> aparezca con altura de 36 pixeles, en fuente Verdana y cn color naranja. CSS puede resaltar tambien contenidos, añadiendo bordes, cambiando margenes e incluso controlando la posicion exacta de cada elemento de la pagina. Un estilo es, de hecho, la combinacion de dos elementos: la pagina web elemental que formatea el buscador (el selector) y las instrucciones de formato reales (el bloque de declaracion). Por ejemplo un selector puede ser un encabezamiento, un parrafo de texto, una foto, etc. El bloque de declaracion puede cambiarlo a texto azul, añadir un borde rojo en torno a un parrafo, poner la foto en el centro de la pagina: las posibilidades son infinitas.

Add Comment