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