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