Fonts are not displayed when used with JSF

Asked

Viewed 569 times

1

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

He’s being visualized like this:

And it was supposed to be like this:

How do I fix this problem?

This is the page header to show how it is configured to receive Bootstrap settings:

<?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 excerpt from the page that is presenting 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 that way, but I didn’t 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;

inserir a descrição da imagem aqui

twitter-bootstrap jsf-2.2

  • Good evening, I wonder if any of the answers helped you, if not please comment on what you think is missing.

2 answers

3

First of all:

  • You don’t need to reference bootstrap.css and bootstrap.min.css, just use bootstrap.css after you minifica.

  • Inside bootstrap.css will look something like this...

    inserir a descrição da imagem aqui

Try changing the icon url to:

 @font-face {
        font-family: 'Glyphicons Halflings';
        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');
    }

Thus successively.

  • could take a look at my post, just updated

  • You tried to modify your font-face block in bootstrap.css for this response?

  • I’ve made several attempts with that answer and I haven’t succeeded, please I still need help.

  • Dude, you need to put the directory where your sources are... instead of: url("#{Resource['fonts/glyphicons-Halflings-regular...']} put url("#{Resource['Resources.fonts/glyphicons-Halflings-regular...']} , instead of fonts/ put the directory where your fonts are located.

  • based on the image in my project that I put in the post, where my sources should be?

2

There are some questions

  1. You cannot 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" />

    Switch to if it’s production:

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

    Switch to if it’s development:

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

    When you load the bootstrap.js it also loads the . map

  2. 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’s production, use only:

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

    If it’s 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, 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 is a 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>

  3. 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 answer of @rafaelblink:

    • #{resource['fonts:glyphiconshalflings-regular.eot]} for example you open the apostrophe ', but doesn’t close it.
    • ?#iefix you used ? inside Source and did not close the {[ when it should have been with ]}, note that ? and # should go after ]} because they are not part of the "real path" of the Source.

    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 recommend here (Do not edit the original files): /a/82225/3635

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

Browser other questions tagged twitter-bootstrap jsf-2.2

You are not signed in. Login or sign up in order to post.