Problema com @font-face usando JSF

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 :confused:

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?

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

<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>

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.