0

I have the following SVG image:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="-598.513 -318.988 1000 1000" width="1000" height="1000" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>@import url(https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop%3Aital%2Cwght%400%2C400);</style>
  </defs>
  <g transform="matrix(1, 0, 0, 1, -348.513, 14.569339)">
    <rect style="stroke-width: 15px; fill: rgb(255, 255, 255); stroke: rgb(43, 43, 43);" width="800" height="800" rx="70" ry="70" y="-150" x="-150"/>
  </g>
  <text style="fill: rgb(80, 96, 255); font-family: &quot;Hachi Maru Pop&quot;; font-size: 692.4px; font-weight: 700; white-space: pre;" x="-381.352" y="481.913">D</text>
</svg>

It does contain @import which imports font (Hachi Maru Pop) from Google Fonts. And it's working as expected when opening in a normal browser window:

working as expected when opened in a normal browser window

But when using it as a browser favicon, the font breaks and loads a fallback font (which I guess is Arial):

it breaks when used as a browser favicon - firefox

it breaks when used as a browser favicon - chrome

I guess this happens because the browser loads the favicon before the font loads. Am I missing something fundamental here? How can I solve this if possible?

Improve this question
8
  • You are right, favicon is loaded first and the font is not available at the time, to work around that, you need to make this font appear as path.
    – Wasiu
    Commented Jun 17, 2023 at 21:58
  • @RobertLongson I'm not sure if mentioning works in this case, but can you explain how my question and the question you listed are duplicate?
    – Ghost
    Commented Jun 17, 2023 at 22:02
  • @Wasiu Ah, I see, thanks. Do you have any examples for that? I tried to use Google Font to Svg Path but I guess it's not working anymore. This's going to be a hassle doing manually.
    – Ghost
    Commented Jun 17, 2023 at 22:15
  • @RobertLongson Right, but the question you mentioned is very unrelated? What does "levels of recursion" even mean? How is that going to solve the problem listed above?
    – Ghost
    Commented Jun 17, 2023 at 22:18
  • 1
    I've added some more duplicates that explain the issue using different words. It boils down to these two points... 1. A favicon is an example of an image. 2. An image must be self-contained.
    – Robert Longson
    Commented Jun 17, 2023 at 22:33
Related questions
130
Cannot display HTML string
0
How to parse the data which contains Html tags like style, color,font family, fontsize and set in textview in android
0
Variable font from Google Fonts doesn't change weight
Load 5 more related questions Show fewer related questions

0

Reset to default

Browse other questions tagged or ask your own question.