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?

Kevin M. Mansour
  • 2,915
  • 6
  • 18
  • 35
  • 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 Jun 17 '23 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? – Kevin M. Mansour Jun 17 '23 at 22:02
  • @Wasiu Ah, I see, thanks. Do you have any examples for that? I tried to use [Google Font to Svg Path](https://danmarshall.github.io/google-font-to-svg-path/) but I guess it's not working anymore. This's going to be a hassle doing manually. – Kevin M. Mansour Jun 17 '23 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? – Kevin M. Mansour Jun 17 '23 at 22:18
  • @KevinM.Mansour You can try changing `D` to `D` if that doesn't work use Adobe Illustrator to redo it and cover D to path – Wasiu Jun 17 '23 at 22:22
  • 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 Jun 17 '23 at 22:33
  • @Kevin M. Mansour: You can easily embed your font via [vecta nano optimizer](https://vecta.io/nano) - it can automatically **embed google fonts as a subset data url **(so only used characters are included). This might sometimes not work - in this case you can create a data URL with transfonter. See also [related question: "SVG that renders differently on different OS"](https://stackoverflow.com/questions/71397167/svg-that-renders-differently-on-different-os/71398356#71398356) – herrstrietzel Jun 21 '23 at 17:40
  • @KevinM.Mansour, You are missing the point of the favicon. It is not always part of your page. It is often loaded, without loading your page. And it's pretty obvious to most of us, that it needs to be self-contained. – Rohit Gupta Jun 22 '23 at 03:52

0 Answers0