Problema com @font-face usando JSF

27 de março de 2012 2 respostas

TuSSeRa 27 de março de 2012

Olá!

Estou desenvolvendo um projeto onde utilizo JSF 2 com JBOSS.

Estou querendo utilizar uma fonte diferente e por isso estou usando o @font-face. No entando, a fonte não está renderizando no navegador

Estou usando dessa forma:

@font-face {
    font-family: 'GillSansStd';
    src: url('#{facesContext.externalContext.requestContextPath}/resources/fonts/GillSansStd-webfont.eot');
    src: url('#{facesContext.externalContext.requestContextPath}/resources/fonts/GillSansStd-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{facesContext.externalContext.requestContextPath}/resources/fonts/GillSansStd-webfont.woff') format('woff'),
         url('#{facesContext.externalContext.requestContextPath}/resources/fonts/GillSansStd-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
.GillSansStd {font-family:GillSansStd, Georgia, Arial, Tahoma;}

No .xhtml usso assim:

<font class="GillSansStd" style="font-size: 16px;">
Teste
</font>

Mas não da certo e a fonte não aparece certo… alguem sabe o que pode estar acontecendo?

2 Respostas

TuSSeRa 27 de mar. de 2012

Configurei o mime-type no meu web-xml e mesmo assim não funcionou tbm

<mime-mapping>
		<extension>eot</extension>
		<mime-type>application/vnd.ms-fontobject</mime-type>
	</mime-mapping>
	
	<mime-mapping>
		<extension>otf</extension>
		<mime-type>font/opentype</mime-type>
	</mime-mapping>
	
	<mime-mapping>
		<extension>ttf</extension>
		<mime-type>application/x-font-ttf</mime-type>
	</mime-mapping>
	
	<mime-mapping>
		<extension>woff</extension>
		<mime-type>application/x-font-woff</mime-type>
	</mime-mapping>
	
	<mime-mapping>
        <extension>svg</extension>
        <mime-type>image/svg+xml</mime-type>
    </mime-mapping>

marcio_makro 8 de ago. de 2014

Bom dia TuSSeRa,

Consegui utilizar o font-face colocando o codigo no template jsf dentro do header.

<style type="text/css">
@font-face {
    font-family: 'roundhand_freeregular';
    src: url('#{facesContext.externalContext.requestContextPath}/resources/fontes/roundhand/roundhand_free-webfont.eot');
    src: url('#{facesContext.externalContext.requestContextPath}/resources/fontes/roundhand/roundhand_free-webfont.eot?#iefix') format('embedded-opentype'),
         url('#{facesContext.externalContext.requestContextPath}/resources/fontes/roundhand/roundhand_free-webfont.woff') format('woff'),
         url('#{facesContext.externalContext.requestContextPath}/resources/fontes/roundhand/roundhand_free-webfont.ttf') format('truetype'),
         url('#{facesContext.externalContext.requestContextPath}/resources/fontes/roundhand/roundhand_free-webfont.svg#roundhand_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

}</style>

Configurei o mime-type no web.xml e criei a pasta fontes onde coloquei elas igual está no caminho acima.

O ideal era

<h:outputStylesheet library="css" name="styles.css"/>

Mas como funcionou dessa forma não vejo problema em colocar somente o trecho do @font-face no arquivo de template e todo o resto no modo correto.

Criado 27 de março de 2012

Ultima resposta 8 de ago. de 2014

Respostas 2

Participantes 2

2 Respostas

Topicos relacionados