I'm using the Monotype Fonts subscription. Unfortunately in the Monotype stylesheet font-display is set to swap which results in Flash of Unstyled Text. How can I have font-display set to block to get FOIT Flash of Invisible Text? Monotype don't provide a way to control this. Is there a way I can override it in my CSS or HTML? I've tried adding font-display: block to the element in my stylesheet, but in the browser dev tools it shows as an error 'unknown property name'.
The link to the Monotype (font) stylesheet is the <head>
<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://cdn.fonts.net/kit/xxxxx.css" rel="stylesheet" />
In the browser web dev tools I can see the Monotype sheet:
/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
font-family: "BentonSansProRegular";
font-style: normal;
font-stretch: normal;
font-display: swap;
src: url('BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}
UPDATE
I've tried cloning the Monotype stylesheet, changing the font-display to block and adding the stylesheet to my server. But the font isn't displaying. The fall-back font is being used. Here's my code:
Head
<link rel="preconnect" href="https://cdn.fonts.net">
<link href="https://www.xyz.co.uk/assets/fonts.css" rel="stylesheet">
Stylesheet
/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx");
@font-face {
font-family: "BentonSansProRegular";
font-style: normal;
font-stretch: normal;
font-display: block;
src: url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff2') format('woff2'), url('https://cdn.fonts.net/t/1.css?apiType=css&projectid=xxxxx/BentonSansPro/BentonSansProRegular_normal_normal.woff') format('woff');
}
You should be able to define the font-face yourself, based on the source you have. I demonstrate this for the Google-Fonts font "Roboto":
Normally you would include the following line in the
<head>:Then you could use
font-family: "Roboto"on any element. To change the@font-facedeclaration just copy the stylesheet that you linked in your head and remove the<link …>-element. Now link the copied stylesheet and change it to your liking. For example take the original declaration forlatin:You could change it to:
Obviously you need to change every occurence of the declared "Roboto"-font-face.