Install custom fonts from a .ttf file to TextField

Flow
1

I am trying to install custom fonts from a .ttf file in my web application, but I am completely lost here.
I have created a simple vaadin spring boot application using the starter [Vaadin project starter]
(https://vaadin.com/start/latest),
created a form using FormLayout and added few TextFields and Buttons. Now I want to change the font to Kruti Dev 010. I have the .ttf file for that font and I’m trying to somehow use it to style my TextFields.
If someone would point me to sample project where the fonts are loaded from a .ttf or .woff file then it would be a great help.

Thanks in advance.

2

Hello Nilesh!

One approach you can take is this:

  • Place your font file under src/resources/static/fonts/
  • Create two CSS files under {project root}/frontend/styles called
    • fonts.css
    • textfield-customization.css
  • Add font-face definition into fonts.css
    @font-face {
  font-family: "Name of your font";
  src: url('/fonts/NameOfYourFontFile.ttf');
}
  • Add CSS into textfield-customization.css to change how TextField looks
    [part="value"]

{
font-family: ‘Name of your font’;
}

- `[part="value"]
` only targets the actual text field's value. You can inspect the component to find other parts or have a look at the [documentation]
(https://vaadin.com/components/vaadin-text-field/html-examples/text-field-styling-demos)

- Add resource import annotations to a class, such as `MainView` or the like
  ```
  @CssImport(value = "./styles/fonts.css")
  @CssImport(value = "./styles/custom-textfield.css", themeFor = "vaadin-text-field")
  ```
- The `themeFor` parameter targets the CSS for the component identified by that html tag
3

\u0000Thank you so much, Joni.\nIt worked this way \uD83D\uDE03.\nI also added :host(.class-name) which gives me the flexibility to apply it to only selected TextFields.\nThank you once again.