Google fonts in vaadin 14

Flow
1

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:

<custom-style>
  <style>                             
         @import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700"'); 
    html {        
        --lumo-font-family: "Nunito",  Arial;        
        font-family: var(--lumo-font-family, Arial);                               
    }   
  </style>
</custom-style>

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!
Viktor

18167573.png
18167576.png
18167579.png

2

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 {
  ...
  @Override
  public void configurePage(InitialPageSettings settings) {
    settings.addLink("stylesheet", "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap");
}

html {
  --lumo-font-family: 'Nunito', sans-serif;
}
3

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('https://fonts.googleapis.com/css?family=Nunito:300,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,
Viktor

4

@import url(‘https://fonts.googleapis.com/css?family=Nunito:300,400,700"’);

You have an extra " in there.

I’ll get back to you tomorrow regarding FontAwesome.

5

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

6

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('https://fonts.googleapis.com/css?family=Nunito:300,400,700"');

Best regards, Viktor

7

Hi Viktor,

Apologies for the late reply.

Not sure why it’s not working. It doesn’t seem to be the recommended approach though:
https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

Google Fonts states the following:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap');
</style>

CSS rules to specify families

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