Adding local fonts

Flow
1

Hello, I’ve been searching all day long how to add local fonts to my Vaadin project but i keep failing :frowning:

My fonts are woff files in /frontend/styles/fonts.

I tried two ways but I have no experience at css so I don’t know what I am doing wrong.

My first try:

fonts.css

@font-face {
  font-family: "Gotham";
  src: url('/fonts/Gotham-Bold.woff');
}

@font-face {
  font-family: "Gotham";
  src: url('/fonts/Gotham-Bold.woff2');
}

@font-face {
  font-family: "Gotham";
  src: url('/fonts/GothamBook.woff');
}

@font-face {
  font-family: "Gotham";
  src: url('/fonts/Gotham-Book.woff');
}

@font-face {
  font-family: "Gotham";
  src: url('/fonts/GothamBook.woff2');
}

@font-face {
  font-family: "Gotham";
  src: url('/fonts/Gotham-Book.woff2');
}

html {
  --lumo-font-family: "Gotham";
}

My second try:

shared-styles.css

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

<custom-style>
  <style>

    @font-face {
      font-family: Gotham;
      src: url(./frontend/styles/fonts/GothamBook.woff) format("woff");
    }

    html {
      --lumo-font-family: Gotham, sans-serif;
    }



  </style>
  
</custom-style>

Thank you for your help :smiley:

2

Hey Juliette, you may find all the details for that here:
https://github.com/vaadin/flow-and-components-documentation/issues/1007

3

Hey Luis, thanks a lot for your reply i followed the tutorial and it worked!

4

Glad to hear it! I hope we can get this in the documentation or as a cookbook recipe soon.