Codenameone CSS custom font takes time to render

user_2581314 0
Viewed 33

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?

codenameone kotlin css java
1 Answers

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/

user_105434760
Related