How to use custom fonts in Polymer Components (Vaadin10)

Flow
1

Hi,

I am using Polymer Templates for my views. Defining styling CSS semms to work except for the font definition. It just doesnt pick up the custom fonts.
How can I include custom fonts into Polymer Templates?

Here is my try so far: (h1 is drawn red but not using the custom font, font-files are copied in mentioned directory)


<dom-module id="main-layout"> <template>
<style include='ci-process'>

@font-face {
	font-family: "EuH";
	src: url("fonts/EuH_SansBol.ttf") format("ttf"), url("fonts/EuH_SansBol.woff") format("woff"), url("fonts/EuH_SansBol.eot") format("eot");
	font-weight: 800;
	font-style: normal;
}
h1 {
	font-family: "EuH";
	color: red;
}
2

Hi Arno,

Do you get any errors in the (browser) console?

3

Hi Joacim,

I didnt look at the console.
But now found out, that fonts must be declared in the custom-style section.
What I do now is to include the theming moduel in the custom-style tags as well, see below

<custom-style>
 <style include='ci-base-styles'></style>
</custom-style>

this is inside my ci-base-styles.html
and my ci-base-styles.html starts like this:

 
<link rel="import" href="../bower_components/vaadin-lumo-styles/color.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/typography.html">
<link rel="import" href="../bower_components/polymer/lib/elements/custom-style.html">
 

<dom-module id='ci-base-styles'>
  <template>
    <style>
.... font definition follow...

that way it loads the fonts as well, but I dont know if this is the recomended way to do.
regards,
Arno

4

Looks good to me. :slight_smile:

5

Such a simple thing …
I have a custom font, placed under …/src/main/webapp/fonts/
chrome does not see it …

…/src/main/webapp/icons/
are seen !!!

Where the heck do we place these font files ?

6

For vaadin 14 the @font-face has to reside inside a style.js file see below.

The files shall be located under ./src/main/webapp/fonts

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<custom-style>
    <style>
        @font-face {
            font-family: "FAServer";
            src: url("fonts/faserver-webfont.ttf") format("truetype"), 
                url("fonts/faserver-webfont.woff") format("woff"), 
                url("fonts/faserver-webfont.woff2") format("woff2");
            font-weight: 800;
            font-style: normal;
        }
    </style>
</custom-style>`;

document.head.appendChild($_documentContainer.content);

Dear Vaadin engineers, when you do your magic please LOG warning/errors/clues when dealing with js resources.
Finding this took 2 hours of poking around as to why initially my code was doing absolutely nothing.