Fonts are not displayed when used with JSF

Question

Fonts are not displayed when used with JSF

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I created a Maven project that is using JSF2 plus the Bootstrap framework, but there are some Bootstrap configurations that are not working properly, as you can see in the figures below.

It is being viewed like this:

Andinfactitwasmeanttolooklikethis:

HowdoIfixthis?

ThisistheheaderofthepagetoshowhowitisconfiguredtoreceiveBootstrapsettings:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
</h:head>

This is the only part of the page that is having a problem;

<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-ok"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-star"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="panel panel-default text-center">
            <div class="panel-body">
                <span class="glyphicon glyphicon-play-circle"></span>
                <h4>This is the Heading</h4>
                <p>Nam velit est, tempor vel posuere et, auctor a lectus.
                    Aenean gravida, est accumsan dictum rhoncus, lectus mi suscipit
                    lacus, suscipit accumsan augue tellus vitae dolor. Morbi in
                    euismod dui</p>
            </div>
        </div>
    </div>
</div>

I tried this way, but I did not succeed;

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url("#{resource['fonts:glyphiconshalflings-regular.eot]}");
    src: url("#{resource['fonts:glyphicons-halflings-regular.eot?#iefix")
        format('embedded-opentype'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff2") format('woff2'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff") format('woff'),
        url("#{resource['fonts:glyphicons-halflings-regular.ttf") format('truetype'),
        url("#{resource['fonts:glyphicons-halflings-regular.svg#glyphicons_halflingsregular")
        format('svg');
}

This is the structure of my project;

twitter-bootstrap jsf-2.2

asked by anonymous 17.08.2015 / 19:03

2 answers

Show div / form when user selects an option Referencing CSS in jsp through $ pagecontext.request.contextpath in tomcat8 does not work

score 3 · Answer 1

First of all:

You do not need to reference bootstrap.css and bootstrap.min.css, use bootstrap.css only after you minify.
Inside the bootstrap.css will have something like this ...

Trychangingtheurloftheiconsto:

@font-face{font-family:'GlyphiconsHalflings';src:url("#{resource['fonts/glyphicons-halflings-regular.eot']}");
        src: url("#{resource['fonts/glyphicons-halflings-regular.eot']}?#iefix") format('embedded-opentype'),
                url("#{resource['fonts/glyphicons-halflings-regular.woff']}") format('woff'),
                url("#{resource['fonts/glyphicons-halflings-regular.ttf']}") format('truetype'),
                url("#{resource['fonts/glyphicons-halflings-regular.svg']}#glyphicons-halflingsregular") format('svg');
    }

So on and on.

score 2 · Answer 2

There are some issues

You can not load bootstrap.js and bootstrap.min.js together

bootstrap.js is for development
bootstrap.min.js is for production

Here:

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

Change for production:

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

Switch to development:

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />

When you load bootstrap.js it also loads .map

With CSS too, something like:

 <h:outputStylesheet library="css" name="bootstrap-theme.css" />
 <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />
 <h:outputStylesheet library="css" name="bootstrap.css" />
 <h:outputStylesheet library="css" name="bootstrap.min.css" />

If it is production, use only:

 <h:outputStylesheet library="css" name="bootstrap.min.css" />
 <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />

If it is development, use only:

 <h:outputStylesheet library="css" name="bootstrap.css" />
 <h:outputStylesheet library="css" name="bootstrap-theme.css" />

Note that the theme should always come after the bootstrap, so as not to break the hierarchy.

The end result should look something like:

If it is a development environment:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.js" />
</h:head>

If it's production environment:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputStylesheet library="css" name="bootstrap.min.css" />
    <h:outputStylesheet library="css" name="bootstrap-theme.min.css" />

    <h:outputScript library="js" name="jquery-2.1.4.min.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
</h:head>

I believe this is your problem (note that the previous ones may reflect on this problem, mainly because of the use of the theme), detailing the response of @ rafaelblink :

#{resource['fonts:glyphiconshalflings-regular.eot]} for example you open the apostrofo ' , but do not date it.
?#iefix did you use? within the resource and did not close the {[ when it should with ]} , note that ? and # must go after ]} since they are not part of the "real path" of the resource.

The code should look like this:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("#{resource['fonts:glyphiconshalflings-regular.eot']}");
    src: url("#{resource['fonts:glyphicons-halflings-regular.eot']}?#iefix")
        format('embedded-opentype'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff2']}") format('woff2'),
        url("#{resource['fonts:glyphicons-halflings-regular.woff']}") format('woff'),
        url("#{resource['fonts:glyphicons-halflings-regular.ttf']}") format('truetype'),
        url("#{resource['fonts:glyphicons-halflings-regular.svg']}#glyphicons_halflingsregular")
        format('svg');
}

If it fails, follow what I recommended here (Do not edit the original files): link

Create a file named main.css and add the @font-face {...} to it.