Google Web Fonts

Flow
1

I’ve tryed several methods to use Google Web Fonts, but there’s something I’m not doing allright, because I only get Arial.

First,

@StyleSheet("http://fonts.googleapis.com/css?family=Titillium+Web:600,300")

found on forums, but Eclipse says that “The attribute value is undefinedfor the annotation type StyleSheet”.

After that, I tryed to add head line with a BootStrapListener, like:

public static class Servlet extends VaadinServlet
    {
        @Override
        protected void servletInitialized() throws ServletException {
            super.servletInitialized();
            getService().addSessionInitListener(new SessionInitListener() {
                @Override
                public void sessionInit(SessionInitEvent event) {
                    event.getSession().addBootstrapListener(new BootstrapListener() {
                        @Override
                        public void modifyBootstrapPage(BootstrapPageResponse response) {
                            response.getDocument().head().prependElement("link").attr("type", "text/css").attr("rel", "styleshhet").attr("href","http://fonts.googleapis.com/css?family=Titillium+Web:600,300");
                        }
                        @Override
                        public void modifyBootstrapFragment(BootstrapFragmentResponse response) {
                        }
                    });
                }
            });
        }        
    }

That worked partially. HTML contains:

<link href="http://fonts.googleapis.com/css?family=Titillium+Web:600,300" rel="styleshhet" type="text/css">
</link>

and font is set in myapp.scss like:

.titulo_principal
{
font-family: 'Titillium Web', Calibri, Tahoma, Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
}

but font is not shown, even when “Titillium Web” appears a the font-family rules of that element in the browser.

Any suggestions? What’s wrong?

Thank you!

2

Hi, I tried using the web fonts and they seems to work just ok with the @StyleSheet annotation for the UI class. No need to add the link in the servlet.

@StyleSheet("http://fonts.googleapis.com/css?family=Cabin+Sketch")
@Theme("book-examples")
public class BookExamplesUI extends UI {

Then have something styled with the font:

// Something for which we change the CSS
Label label = new Label("Hello, world!");
label.addStyleName("usethewebfont");
layout.addComponent(label);

And use it in the CSS:

.usethewebfont {
    font-family: 'Cabin Sketch';
    font-size: 24px;
    font-weight: bold;
    padding-top: 10px;
    padding-left: 10px;
    line-height: 30px;
}

See the example
here
.

However, when I tried to use the “Titillium Web” font in the same way, it didn’t work. I don’t know why.

3

Thank you for your response.

Ok. I forgot:

import com.vaadin.annotations.StyleSheet;

so now I can use @StyleSheet annotation. And it works for me with Titillium Web.

4

hi,

i tried to use StyleSheet annotation and BootstrapListener to link a web font, but when i do, my Vaadin page doesnt load, both with same result

stylesheet on my UI

@StyleSheet("http://fonts.googleapis.com/css?family=Roboto:400,100,300,700")

html result without stylesheet

<div id="profileswebapp-6909257" class=" v-app mytheme">
    <div class="v-ui v-scrollable" tabindex="1" style="height: 100%; width: 100%;" width-range="1025px-">
        <div class="v-loading-indicator first" style="position: absolute; display: none;"></div>
        <div class="v-verticallayout v-layout v-vertical v-widget v-has-width v-has-height" style="position: absolute; height: 100%; width: 100%;"></div>
    </div>
</div>

with stylesheet

[code]

[/code]according to console output, application loads fine, but isnt send to browser... i tried more fonts, nothing... and when i load a page without stylesheet annotation and add link tag to the head of page manually in the browser, it works fine... any ideas?
5

Milan,

Did you follow Marko’s approach? Remember to import StyleSheet and to annotate the UI class.

import com.vaadin.annotations.StyleSheet;

@StyleSheet("http://fonts.googleapis.com/css?family=Roboto")
@Theme("TestingUI")
public class TestingUI extends UI {

Apply the custom style for the component you wish to style.

Label test = new Label("test");
test.addStyleName("custom-font");

And set the font-family in your SCSS.

.custom-font {
    font-family: 'Roboto';
}
6

yes, thats what i did…

i dont have problem with style itself, but when i link it, rest of the Vaadin app doesnt show in the browser, its just missing in html code as you see above (that vertical layout)

7

bump

8

Instead of using the @StyleSheet annoation, you might as well import the stylesheet in your theme.

@import "http://fonts.googleapis.com/css?family=Roboto:400,100,300,700";

The problem sounds like it would be
worth a ticket
.

9

thanks for advice…

i solved it by using local font, that way StyleSheet annotation worked… but everytime i used font from website, i didn’t…

i’ll post a ticket when i will have enough time for some testing

10

Hi,

Any Idea how I can add a font family with stylesheet annotation, when the link has a pipe?
@StyleSheet({“https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed”})
I got: java.net.URISyntaxException: Illegal character in query at index 46
I also replaced | with %7C but it doesn’t work.

Thanks,

11

What about adding it in two lines? One with family=Roboto in the end and one as family=Roboto+Condensed? These are two different fonts.

/J

12

I’m not sure, but if I remember, StyleSheet annotation is allowed only once… I would maybe try to check if there is a way how to add two fonts with single stylesheet annotation…

you could try to do it with your own css, so you would use stylesheet annotation for your own css file and in that file you would link the web fonts, as Jouni proposed to me few lines above…

13

I couldn’t add two stylesheet in two lines.

14

@StyleSheet({“https://fonts.googleapis.com/css?family=Roboto","https://fonts.googleapis.com/css?family=Roboto+Condensed”})

yeah, badly phrased by me. I am using scala, but in java I suppose it will be something like this above.

15

Thank you, Jonas! So it works :slight_smile:

16

I try but i cant use Monserrat Font. Please Help.

@StyleSheet({“http://fonts.googleapis.com/css?family=Montserrat”})

nombre.setStyleName(“monserratFont”); // nombre is a TextField

// Styles.scss
.monserratFont{
font-family: ‘Monserrat’;
}