Foren

Problemas para cargar fuentes propias en tema

Vic Rodriguez, geändert vor 7 Jahren.

Problemas para cargar fuentes propias en tema

New Member Beiträge: 2 Beitrittsdatum: 06.09.16 Neueste Beiträge
Hola, buen día a todos!

He desarrollado un tema para un sitio que estoy construyendo y al tratar de usar mis propias fuentes he tenido algunos problema,
dentro del archivo _custom.scss que está debajo de mi carpeta _diff incluí la fuente de la siguiente manera:

@font-face {
font-family: 'Alsanbol SB';
src: url('ALSANBOL.otf');
}

La fuente se encuentra en la misma carpeta que el archivo _custom-css es decir /Users/VR/Liferay/plugins/liferay-plugins-7.0.1-ga2/themes/my-theme/docroot/_diffs/css

Con todo esto, no he podido hacer que mis textos en pantalla tomen esa fuente para el font family de css.

Vi que ya hay una fuente que se importa en el navegador (vi esto en la consola javascript de chrome) y que está debajo de:

o/my-theme/css/aui/lexicon/fonts/alloy-font-awesome/font

la fuente que se importa ahí es fontawesome.woff

Entonces, intenté meter ahí mis fuentes pero, obtuve el mismo resultado.

La pregunta es: ¿Cómo es que debo importar mis fuentes y poder usarlas en mis tags de vista?

Alguien tiene una idea?

Les agradezco de antemano.
thumbnail
Marcos Castro, geändert vor 7 Jahren.

RE: Problemas para cargar fuentes propias en tema

New Member Beiträge: 11 Beitrittsdatum: 16.06.14 Neueste Beiträge
Muy buenas!

Te falta bajar un directorio.

Tienes un buen ejemplo en el theme Westeros Bank:
https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-theme-westeros-bank/frontend-theme-westeros-bank/src/css/partials/_fonts.scss

En este ejemplo las fuentes están ubicadas aquí:
https://github.com/liferay/liferay-portal/tree/master/modules/apps/frontend-theme-westeros-bank/frontend-theme-westeros-bank/src/fonts
Y el archivo que las incorpora una vez compilado el SASS es css/main.css:

En este theme que pongo como ejemplo estamos usando el mixing font-face de bourbon:
http://bourbon.io/docs/#font-face

Pero puedes hacerlo como prefieras. :-)