For some reason my locally stored font is not being decoded correctly in my jsf application. I've tried everything, and at this point I'm at a loss.
This is the css reference (located in project/resources/text - same as font files)
#font-face {
font-family: 'BunkenTechSansStd-Med';
src: url("#{resource['text/30B733_0_0.eot']}");
src: url("#{resource['text/30B733_0_0.woff2']}") format('woff2'),
url("#{resource['text/30B733_0_0.woff']}") format('woff'),
url("#{resource['text/30B733_0_0.ttf']}") format('truetype');
}
The sheet is referenced in the template as:
<h:outputStylesheet library="text" name="MyFontsWebfontsKit.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>
The error I'm receiving in chrome is stated as follows (for all three files):
"failed to decode downloaded font: http://localhost:1717/javax.faces.resource/text/30B733_0_0.woff2.jsf"
Here's is the folder structure:
Furthermore the mapping is as follows:
<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>svg</extension>
<mime-type>image/svg+xml</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>woff2</extension>
<mime-type>application/x-font-woff2</mime-type>
</mime-mapping>
And lastly a pic of the error in dev tools:
JSF apparently requires folder nav as ":" instead of backslashes.
#font-face {font-family: 'BunkenTechSansStd-Med'; src: url("#{resource['text:30B733_0_0.eot']}");
src: url("#{resource['text:30B733_0_0.woff2']}") format('woff2'),
url("#{resource['text:30B733_0_0.woff']}") format('woff'),
url("#{resource['text:30B733_0_0.ttf']}") format('truetype');}
Related
#font-face {
font-family: 'Futura Std';
src: url('../fonts/FuturaStd-Light.eot');
src: url('../fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/FuturaStd-Light.woff') format('woff'),
url('../fonts/FuturaStd-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
List item
Am getting issue to loading fonts. My path is fine but still not loading
fonts in IE all versions
I want to import fonts into CSS file into JSF page.
This code works fine:
src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
But this is not working:
src: local('Roboto Light'), local('Roboto-Light'), url("#{resource['fonts/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2']}") format('woff2');
Any idea where I'm wrong?
For my webapp i'm trying to introduce the richface skinning.
I'm getting an error that leaves me clueless.
Old situation (works) :
messages.css
#inhoud #infoblock {
min-height:36px;
width:100%;
background:#B1D1FA url(#{resource['image/helpmelding.gif']});
padding:2px 0;
background-position: 3px center;
}
New situation (Doesn't work correctly)
messages.ecss
#inhoud #infoblock {
background-color:'#{richSkin.infoBlockBackground}';
padding:2px 0;
background-image:url(#{resource['image/helpmelding.gif']});
background-position: 3px center;
background-repeat:no-repeat;
min-height:36px;
width:100%;
}
result:
*#inhoud *#infoblock {
background-color: #B1D1FA;
padding:2px 0;
}
Stopped css parsing when hitting
#{resource['image/helpmelding.gif']}
Logger:
WARNING: Problem parsing 'messages.ecss' resource: Error in expression.
Invalid token "#". Was expecting one of: <S>, "+", "-", <HASH>, <STRING>, <URI>, "inherit", <EMS>, <EXS>, <LENGTH_PX>, <LENGTH_CM>, <LENGTH_MM>, <LENGTH_IN>,
<LENGTH_PT>, <LENGTH_PC>, <ANGLE_DEG>, <ANGLE_RAD>, <ANGLE_GRAD>, <TIME_MS>, <TIME_S>, <FREQ_HZ>, <FREQ_KHZ>, <DIMEN>,
<PERCENTAGE>, <NUMBER>, "rgb(", <FUNCTION>, <IDENT>, <UNICODERANGE>.
mei 06, 2014 2:25:42 PM org.richfaces.resource.CompiledCSSResource$ErrorHandlerImpl logException
Settings
web.xml
<!-- Resource Servlet van Richfaces-->
<servlet>
<servlet-name>Resource Servlet</servlet-name>
<servlet-class>org.richfaces.webapp.ResourceServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Resource Servlet</servlet-name>
<url-pattern>/org.richfaces.resources/*</url-pattern>
</servlet-mapping>
pom.xml
<plugin>
<groupId>org.richfaces.cdk</groupId>
<artifactId>maven-richfaces-resources-plugin</artifactId>
<version>${org.richfaces.bom.version}</version>
<configuration>
<skins>
<!-- the name of your skin -->
<skin>LUID</skin>
</skins>
<excludedFiles>
<exclude>^\Qorg.richfaces.renderkit.html.images.\E.*</exclude>
<exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
<exclude>^\Qorg.richfaces.renderkit.html.iconimages.\E.*</exclude>
</excludedFiles>
<includedContentTypes>
<include>application/javascript</include>
<include>text/css</include>
<include>image/.+</include>
</includedContentTypes>
<fileNameMappings>
<property>
<name>^.*showcase.*/([^/]+\.css)$</name>
<value>org.richfaces.luid.css/$1</value>
</property>
<property>
<name>^.+/([^/]+\.(png|gif|jpg))$</name>
<value>org.richfaces.images/$1</value>
</property>
<property>
<name>^.+/([^/]+\.css)$</name>
<value>org.richfaces.css/$1</value>
</property>
</fileNameMappings>
</configuration>
....
</plugin>
As the error tells you, the url cannot start with a '#'. You need to wrap it in quotes:
background-image: url("#{resource['image/helpmelding.gif']}");
I am attempting to use a font generated from Font Squirrel as the base font for Twitter Bootstrap (compiled from the LESS files). I am using Express.js with Node.js, and have included the font files within the font directory, i.e.
myapp
|_ public
|_ stylesheets
|_ font
I have "installed" Font Awesome by changing the variables in bootstrap.less and have it working, so I know the directory structure is correct. With the custom font files in the font directory, where do I go next? Do I need to make a my-custom-font.less file that contains the #font-face declarations, or do I need to declare this within one of the bootstrap LESS files? I am aware that the base font is declared in variables.less via the #baseFontFamily attribute, but as I described I am not really sure how to declare this to be my custom font family. Thanks in advance.
EDIT
Below is the snippet of code I am attempting to use:
#ChatypePath: "font";
#font-face {
font-family: 'chatypeb2.1regular';
src: url('#{ChatypePathPath}/chatypeb2.1regular-webfont.eot?v=3.0.1');
src: url('#{ChatypePathPath}/chatypeb2.1regular-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('#{ChatypePathPath}/chatypeb2.1regular-webfont.woff?v=3.0.1') format('woff'),
url('#{ChatypePathPath}/chatypeb2.1regular-webfont.ttf?v=3.0.1') format('truetype');
}
NOTE: There is something erroneous here.
UPDATE:
Correct declaration:
#chatypeFontFamily: "ChatypeB2.1ThinThin", "Courier New", monospace;
#font-face {
font-family: 'ChatypeB2.1ThinThin';
src: url('font/chatypeb2.1thin-webfont.eot');
src: url('font/chatypeb2.1thin-webfont.eot?#iefix') format('embedded-opentype'),
url('font/chatypeb2.1thin-webfont.woff') format('woff'),
url('font/chatypeb2.1thin-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I would try something like this in the variables.less:
#customFontFamily: "Custom", "Courier New", monospace;
/* here you should use whatever #font-face squirrel generated in the stylesheet.css */
#font-face {
font-family: 'Custom';
font-style: normal;
font-weight: 400;
src: local('Custom'), local('Custom-Regular'), url(path.to.font.file.woff) format('woff');
}
you can also put the font-face into a separate file and then using #import, but I don't think it's necessary. And then you can call the #cusomFontFamily and use it as #baseFontFamily, or wherever you want.
I downloaded two font kits from Font Squirrel, and they work everywhere except on iphone/ipad. This makes me think there is a problem with the svg file.
I have another font downloaded from font squirrel on a separate site (through the same host) that is working great on my mobile devices, and I cannot see what the difference is between them that would make the font work on one site but not another.
My host recognizes svg (says so here: http://wiki.dreamhost.com/MIME_Types), so i don't think it is a problem with the MIME type. i don't know much about this though and might be missing something.
I have also checked the id in my svg files, and they match the #id in my #font-face declarations:
#font-face {
font-family: 'BebasNeueRegular';
src: url('BebasNeue-webfont.eot');
src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('BebasNeue-webfont.woff') format('woff'),
url('BebasNeue-webfont.ttf') format('truetype'),
url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'OswaldStencilRegular';
src: url('Oswald-Stencil-webfont.eot');
src: url('Oswald-Stencil-webfont.eot?#iefix') format('embedded-opentype'),
url('Oswald-Stencil-webfont.woff') format('woff'),
url('Oswald-Stencil-webfont.ttf') format('truetype'),
url('Oswald-Stencil-webfont.svg#OswaldStencilRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Does anyone know what the problem could be here?