web: Use CanvasFontRenderer when enabled

When DeviceFontRenderer::Canvas is set, no fonts will be set up, and
instead CanvasFontRenderer will be used to render all device fonts.

Author: kjarosh

web/src/builder.rs

@@ -688,10 +688,16 @@ impl RuffleInstanceBuilder {
                 .with_fs_commands(interface);
         }
 
-        let trace_observer = Rc::new(RefCell::new(JsValue::UNDEFINED));
+        let trace_observer: Rc<RefCell<JsValue>> = Rc::new(RefCell::new(JsValue::UNDEFINED));
+        let use_canvas_font_renderer =
+            matches!(self.device_font_renderer, DeviceFontRenderer::Canvas);
         let core = builder
             .with_log(log_adapter::WebLogBackend::new(trace_observer.clone()))
-            .with_ui(ui::WebUiBackend::new(js_player.clone(), &canvas))
+            .with_ui(ui::WebUiBackend::new(
+                js_player.clone(),
+                &canvas,
+                use_canvas_font_renderer,
+            ))
             // `ExternalVideoBackend` has an internal `SoftwareVideoBackend` that it uses for any non-H.264 video.
             .with_video(ExternalVideoBackend::new_with_webcodecs(
                 log_subscriber.clone(),
@@ -724,7 +730,10 @@ impl RuffleInstanceBuilder {
             core.set_show_menu(self.show_menu);
             core.set_allow_fullscreen(self.allow_fullscreen);
             core.set_window_mode(self.wmode.as_deref().unwrap_or("window"));
-            self.setup_fonts(&mut core);
+
+            if matches!(self.device_font_renderer, DeviceFontRenderer::Embedded) {
+                self.setup_fonts(&mut core);
+            }
         }
 
         Ok(BuiltPlayer {

web/src/ui.rs

@@ -148,10 +148,16 @@ pub struct WebUiBackend {
 
     /// Is a dialog currently open
     dialog_open: bool,
+
+    use_canvas_font_renderer: bool,
 }
 
 impl WebUiBackend {
-    pub fn new(js_player: JavascriptPlayer, canvas: &HtmlCanvasElement) -> Self {
+    pub fn new(
+        js_player: JavascriptPlayer,
+        canvas: &HtmlCanvasElement,
+        use_canvas_font_renderer: bool,
+    ) -> Self {
         let window = web_sys::window().expect("window()");
         let preferred_language = window.navigator().language();
         let language = preferred_language
@@ -165,6 +171,7 @@ impl WebUiBackend {
             language,
             clipboard_content: "".into(),
             dialog_open: false,
+            use_canvas_font_renderer,
         }
     }
 
@@ -299,9 +306,39 @@ impl UiBackend for WebUiBackend {
         self.js_player.display_unsupported_video(url.as_str());
     }
 
-    fn load_device_font(&self, _query: &FontQuery, _register: &mut dyn FnMut(FontDefinition)) {
-        // Because fonts must be loaded instantly (no async),
-        // we actually just provide them all upfront at time of Player creation.
+    fn load_device_font(&self, query: &FontQuery, register: &mut dyn FnMut(FontDefinition)) {
+        if !self.use_canvas_font_renderer {
+            // In case we don't use the canvas font renderer,
+            // because fonts must be loaded instantly (no async),
+            // we actually just provide them all upfront at time of Player creation.
+            return;
+        }
+
+        let renderer =
+            font_renderer::CanvasFontRenderer::new(query.is_italic, query.is_bold, &query.name);
+
+        match renderer {
+            Ok(renderer) => {
+                tracing::info!(
+                    "Loaded a new canvas font renderer for font \"{}\", italic: {}, bold: {}",
+                    query.name,
+                    query.is_italic,
+                    query.is_bold
+                );
+                register(FontDefinition::ExternalRenderer {
+                    name: query.name.clone(),
+                    is_bold: query.is_bold,
+                    is_italic: query.is_italic,
+                    font_renderer: Box::new(renderer),
+                });
+            }
+            Err(e) => {
+                tracing::error!(
+                    "Failed to set up canvas font renderer for font \"{}\": {e:?}",
+                    query.name
+                )
+            }
+        }
     }
 
     fn sort_device_fonts(