导入的字体在 Chrome 中有效，但在 Safari 中无效

Question

I have been testing my website in Chrome and have everything working as expected, but I just found out my font does not get imported in Safari and the default font is used instead of the one I'm supposed to be using. I included a snippet showing how I'm importing and using the font - maybe I need to access the font in a different way to have it available to use in both browsers?

 const context = document.querySelector("canvas").getContext("2d"); context.width = document.body.clientWidth; context.height = document.body.clientHeight; context.beginPath(); context.font = "10vw Montserrat"; context.fillStyle = "red"; context.textAlign="center"; context.textBaseline = "middle"; context.fillText("XXXXXX", context.width/2, context.height/2); context.closePath();

 @import url('https://fonts.googleapis.com/css?family=Montserrat:900i&display=swap');

 <canvas class="game"></canvas>

Answer 1

A webfont will only be loaded if it's actually used in your DOM.
You can check this in chromes dev tool network tab.
(I assume it works for you in Chrome, as you may have "Montserrat" installed locally).

To ensure the font is loaded, you could load it via js FontFace() method.

Working example

 const canvas = document.querySelector("canvas"); const context = canvas.getContext("2d"); context.width = document.body.clientWidth; context.height = document.body.clientHeight; let fontUrl = "https://fonts.gstatic.com/s/montserrat/v24/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jqw16WXh0pg.woff2"; let fontFamily = "Montserrat"; let fontOptions = { weight: 900, style: "italic" }; loadFonts(fontFamily, fontUrl, fontOptions); async function loadFonts(fontFamily, fontUrl, fontOptions) { const font = new FontFace(fontFamily, `url(${fontUrl})`); font.weight = fontOptions.weight ? fontOptions.weight : 400; font.style = fontOptions.style ? fontOptions.style : "normal"; // wait for font to be loaded await font.load(); document.fonts.add(font); // apply font styles to canvas canvas.classList.add("fonts-loaded"); canvas.setAttribute( "style", `font-family:${fontFamily}; font-weight:${fontOptions.weight}; font-style:${fontOptions.style}` ); drawText(); } function drawText() { context.font = "48px Montserrat"; context.fontWeight = 900; context.fontStyle = "italic"; context.fillStyle = "red"; context.textAlign = "center"; context.textBaseline = "middle"; context.fillText("Hamburg", 150, 50); }

 canvas { height: 50vh; border: 1px solid red } .fonts-loaded { border: 1px solid green; }

 <canvas class="game" />

1. We're loading the font file in an async function
   (just open the google font css (eg https://fonts.googleapis.com/css?family=Montserrat:900i ) to get the actual font file url)
2. Once the font is loaded we're applying the desired font style properties to the canvas element by setting an inline style (you could also use a class)
3. Now we can draw the text on canvas