2

I was using custom CSS font by doing the following:

@font-face {
    font-family: "airborne";
    src: url(fonts/Airborne.ttf);
}

:root {
   --styled-text: "airborne";
 }

PillButtonText{
    color: white;
    font-size: 10pt;
    font-weight: bold;
    font-family: var(--styled-text);
}


val bookTableButton = Label("Book a table".toUpperCase())
bookTableButton.uiid = "PillButtonText"

The custom font is displayed but with some caveat.

It renders the default font at first then it changes to the new font after that.

enter image description here

What is the right way to load font before rendering the component so that we do not see this flicker?

erluxman
  • 18,155
  • 20
  • 92
  • 126
  • Try to apply the font equally to all UIID states. I'm guessing the button transitions between selected/unselected states. Fonts are loaded on startup – Shai Almog Mar 21 '20 at 05:18

1 Answers1

0

Tom Gullen
Wait for fonts to load before rendering web page

This is down to how the browser behaves.

First off where is your @font declared? Is it inline to your HTML, declared in a CSS sheet on the page, or (hopefully) declared in an external CSS sheet?

If it is not in an external sheet, try moving it to one (this is better practice anyway usually).

If this doesn't help, you need to ask yourself is the fraction of a second difference really significantly detrimental to the user experience? If it is, then consider JavaScript, there are a few things you might be able to do, redirects, pauses etc, but these might actually be worse than the original problem. Worse for users, and worse to maintain.

This link might help:

http://paulirish.com/2009/fighting-the-font-face-fout/

Romer
  • 30
  • 9