Google fonts in vaadin 14

Hi there!

I am trying to use google fonts in a simple vaadin14 application. At first glance, I can import the desired font and I can use that, despite this the browsers ( Chrom and Safari ) can’t use it.
Here is my shared-style config:

         @import url(',400,700"'); 
    html {        
        --lumo-font-family: "Nunito",  Arial;        
        font-family: var(--lumo-font-family, Arial);                               

As you can see on the attachement ( in Chrome ) , the computed font-family is Nunito, but the rendered font is Arial. The font loaded properly.
Where is the problem? Why the browser can’t use the font type?
Thank’s the answers!


Hi Viktor,

I think you might have a typo in your import.

If that doesn’t fix it, you can always do the following:

public class MainLayout extends ... implements PageConfigurator {
  public void configurePage(InitialPageSettings settings) {
    settings.addLink("stylesheet", ";400;700&display=swap");
html {
  --lumo-font-family: 'Nunito', sans-serif;

Hi Joacim!
Thank you for your quick answer!
At first, your solution is working correctly!
But it is interestening, why doesn’t work my original code, because I can see the downloaded CSS from Google Fonts API but I can’t see the woff2 files via Chrome Network view. The URL is the same in both cases, so shouldn’t be there any typo. Have you any idea?

@import url(',400,700"');

In other hand, how can I use font awesome fonts? I have downloaded the neccessary library, and put into resources/font folder and added a link to InitialPageSettings, similar than your solution.

settings.addLink("stylesheet", "/fonts/font-awesome-4.7.0/css/font-awesome.min.css");

Unfortunately, the desired icon doesn’t appear on the screen, but the CSS file loaded.

Best regards,

@import url(‘,400,700"’);

You have an extra " in there.

I’ll get back to you tomorrow regarding FontAwesome.

You are right! But just here on vaadin forum. :slight_smile: I have checked my codes, there is no extra character.

Hi Joacim!

The good news that fontawesome is working properly! I just made a mistake, because after I added the proper URL to InitialPageSettings, I made a simple css class in the shared-styles.js file.

.fontawesome {
	font-family: FontAwesome;
	font-size: 18px;

Later I tried to use that class in my app-view.js file. In my app-view.js file style blokk I imported the shared-styles.js in this way:

<style include="shared-styles">

desipte this I couldn’t use the .fontawesome class.
When I moved this class to app-view.js style block, it immediately started to work.

So the question is that, what is the problem with my original @import directive?

@import url(',400,700"');

Best regards, Viktor

Hi Viktor,

Apologies for the late reply.

Not sure why it’s not working. It doesn’t seem to be the recommended approach though:

Google Fonts states the following:

To embed a font, copy the code into the of your html

  @import url('');

CSS rules to specify families

font-family: 'Nunito', sans-serif;