Dear CoffeeCup Site Designer Developers,

I hope this suggestion finds you well. As a loyal and long standing user of CoffeeCup Site Designer, I've come to appreciate the efficiency and user-friendliness of your software. However, I'd like to address a feature that seems to be missing but could greatly enhance the performance and user experience of websites created with your platform.

Fonts play a crucial role in web design, but they often come with a downside: slow load times. One common issue is the flash of invisible text (FOIT) that occurs while custom fonts are loading, particularly noticeable in certain browsers. To mitigate this, the CSS property "font-display" can be employed within the "@font-face" declaration, with the value "swap" being particularly useful. This instructs the browser to temporarily display system fonts until the custom font loads, thus avoiding the FOIT issue.

Unfortunately, the lack of support for the "font-display" property within CoffeeCup Site Designer means users have to resort to manual editing of CSS files after exporting their projects. This not only adds an extra step to the workflow but also makes it less convenient to implement best practices for web performance.

I believe that integrating support for the "font-display" property directly into CoffeeCup Site Designer would be immensely beneficial for users. Having the option to set font loading behavior easily within the Typography tab or Font settings would streamline the process and ensure that websites created with your software are optimized for performance from the outset.

For reference, here's an example of how the "font-display: swap;" property is typically added to "@font-face" declarations:

/* Custom Fonts Definitions */

@font-face {
font-family: Le Havre Light;
src: url('../custom_fonts/Le Havre Light Light.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: Le Havre Regular;
src: url('../custom_fonts/Le Havre Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: Roboto Regular;
src: url('../custom_fonts/Roboto-Regular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}

For further information on the "font-display" syntax and its benefits, please refer to the following link: https://developer.mozilla.org/en-US/doc … nt-display

Integrating this feature would not only align CoffeeCup Site Designer with modern web design best practices but also empower users to create faster and more responsive websites without additional hassle. I hope you'll consider implementing this enhancement in a future update. (See attached sample of including the Font Display option into CoffeeCup)

Update to most recent version of Bootstrap. Now it's at v5.1 and the Bootstrap site even says that v4 is considered end of life.