Import Google Fonts

Is it possible to import any Google Font and use it without installing in local system ?

Hello,

if you want to import it in your dom-module it would be something like this:

<dom-module id="vaadin-example">
    <template>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');

            :host {
                font-family: 'Major Mono Display', monospace;
            }
        </style>
        <h1>Hello Google</h1>
    </template>
</dom-module>

You can find all Google’s fonts here: https://fonts.google.com/

Hi @Diego,
I’m curious to understand how I can use the google font using your code in the shared-style.html file.

In the shared-style dom id I copy your example, but Vaadin-tabs label still appear with the old font.
Can you explain me how to set a global directive to change font globally (if exist)?

Thanks
Gianluca

Hello Gianluca,

in the case that you want to have the font-family as Global style, you can create a shared-style.html file like this:

<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">

<custom-style>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Major+Mono+Display');

        html {
            --lumo-font-family: 'Major Mono Display',monospace;
            font-family: var(--lumo-font-family,'Arial, Helvetica, sans-serif');
        }
   </style>
</custom-style>

Note that you need to override --lumo-font-family and to use <custom-style>. The main different between <custom-style> and <dom-module> is that <custom-style> is loaded automatically when it is imported, <dom-module> requires to include the style after e.g.: <style include="shared-style"> .

After that, you can import it in the java side like this:

@HtmlImport("frontend://styles/shared-style.html")
public class MainView extends VerticalLayout {
}

In the polymer side it is imported like this:

<link rel="import" href="../styles/shared-style.html">

Great!!
Thanks a lot