Search code examples
htmlcssfontsfont-face

Displaying alternative font for @font-face in CSS

Introducing new font in CSS with @font-face as

@font-face{
font-family:'myCustom';
font-style:normal;
font-weight:400;
src:local('myCustom'),
local('myCustom-Regular'),
url('myCustom.woff') format('woff')
}

and defining the font as

font-family: myCustom, Tahoma, Verdana, cursive;

However, I have two problems:

  1. Until download my custom font, it will not show the second (alternative font), and the text will be blank.

  2. If for any reason the visitor browser does not download my custom font, it will not display any text.

How can I display the alternative font until availability of my custom font?

Solution

  • What I expect to happen is that the first available installed font, among those listed in the font-family list, will be used. If this does not happen, please post a URL for inspection.

    But you may wish to consider the list of font families you use. The odds are that if Tahoma and Verdana would be acceptable, cursive would not be; a normal generic fallback font in this case would be sans-serif.