Custom Fonts in SVG

[Serrallonga25]

Hello, I have a basic knowledge of CSS and SVG and so far I have been able to overcome the problems I have encountered thanks to your forum and the tutorials I have found.

But now I am stuck on a part that seems like it should be simple but I can't get it to work.

I have an SVG with a text with a 7 Segment font.

In the browser I have installed the font is displayed correctly.

But as expected on the rest of the devices that do not have the font it is not displayed correctly.

I have tried adding it in 1001 ways that I found on the internet but none of them seem to work.

@font-face {
  font-family: 'DSEG7-7SEGG';
    src: url('/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.woff2') format('woff2'),
    url('/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.woff') format('woff'),
    url('/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

or

@font-face {
  font-family: 'DSEG7-7SEGG';
    src: url('https://MyDomain/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.woff2') format('woff2'),
    url('https://MyDomain/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.woff') format('woff'),
    url('https://MyDomain/local/floorplan/fonts/DSEG7-7SEGG-CHAN/DSEG7SEGGCHAN-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I've put it in the CSS in the style inside the SVG and even converted the font to base64.

But I can't get it to work

Am I missing something?

Thanks in advance

[OzGav]

@exetico any ideas?

[exetico]

Interesting. Please make a bare minimum example I can use, to speed things up. I will check it hereafter. With that said; I've not checked if there's anything flaky with SVG's and custom fonts, just to point that out.

[Serrallonga25]

Hi @exetico
I really don't know if I'm doing something wrong as I'm not an expert.

I downloaded the font from: https://www.dafont.com/7segments.font
and then converted it to the other formats https://www.fontconverter.io/

With this I understand that it should work from what I was reading in the different forums.

After writing the original post I found a somewhat dirty solution but it worked for me in all browsers except the Android app.

I'll add it in the following message

CSS File

@font-face {
  font-family: '7segments';
  src: url(/local/fonts/7segments.eot);
  src: url(/local/fonts/7segments.eot?#iefix) format('embedded-opentype'),
       url(/local/fonts/7segments.otf) format('otf'),
       url(/local/fonts/7segments.svg#7segments) format('svg'),
       url(/local/fonts/7segments.ttf) format('truetype'),
       url(/local/fonts/7segments.woff) format('woff'),
       url(/local/fonts/7segments.woff2) format('woff2');
}

SVG File

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->

<svg
   version="1.2"
   x="0px"
   y="0px"
   width="245.75999"
   height="245.76001"
   viewBox="0 0 245.75999 245.76001"
   xml:space="preserve"
   id="svg838"
   sodipodi:docname="dibujo2.svg"
   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">&#10;   &#10;    &#10;   <defs
   id="defs838" /><sodipodi:namedview
   id="namedview838"
   pagecolor="#ffffff"
   bordercolor="#000000"
   borderopacity="0.25"
   inkscape:showpageshadow="2"
   inkscape:pageopacity="0.0"
   inkscape:pagecheckerboard="0"
   inkscape:deskcolor="#d1d1d1"
   inkscape:zoom="1.3791224"
   inkscape:cx="183.45"
   inkscape:cy="162.05958"
   inkscape:window-width="1475"
   inkscape:window-height="987"
   inkscape:window-x="1959"
   inkscape:window-y="29"
   inkscape:window-maximized="0"
   inkscape:current-layer="g9"
   inkscape:document-units="in"
   showgrid="true"><inkscape:grid
     id="grid1"
     units="in"
     originx="-113.38583"
     originy="-93.391647"
     spacingx="9.5999999"
     spacingy="9.5999999"
     empcolor="#0099e5"
     empopacity="0.30196078"
     color="#0099e5"
     opacity="0.14902"
     empspacing="5"
     dotted="false"
     gridanglex="30"
     gridanglez="30"
     visible="true" /><inkscape:page
     x="0"
     y="0"
     width="245.75999"
     height="245.76001"
     id="page1"
     margin="0"
     bleed="0" /><inkscape:page
     x="1312.6141"
     y="-93.391647"
     width="29.696293"
     height="29.696293"
     id="page2"
     margin="0"
     bleed="0" /><sodipodi:guide
     position="-113.38583,2141.3916"
     orientation="0,2048"
     id="ink-font-guide-ascender"
     inkscape:label="ascendente"
     inkscape:locked="false" /><sodipodi:guide
     position="-103.78584,339.15165"
     orientation="0,2048"
     id="ink-font-guide-caps"
     inkscape:label="mayús"
     inkscape:locked="false" /><sodipodi:guide
     position="-113.38583,1117.3916"
     orientation="0,2048"
     id="ink-font-guide-x-height"
     inkscape:label="altura de x"
     inkscape:locked="false" /><sodipodi:guide
     position="-113.38583,93.391647"
     orientation="0,2048"
     id="ink-font-guide-baseline"
     inkscape:label="línea base"
     inkscape:locked="false" /><sodipodi:guide
     position="-113.38583,93.391647"
     orientation="0,2048"
     id="ink-font-guide-descender"
     inkscape:label="descendente"
     inkscape:locked="false" /></sodipodi:namedview>&#10;<g
   id="ICIdealClimaTeda"
   transform="translate(-53.397325,-103.29015)"
   style="display:inline">&#10;		&#10;		&#10;		&#10;		&#10;	<rect
   style="fill:#808080;stroke:#4d4d4d;stroke-width:9.33462;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none"
   id="rect843"
   width="236.42537"
   height="236.42538"
   x="58.064629"
   y="107.95746" /><g
   id="g9"
   inkscape:label="DisplayLm"
   transform="translate(-806.27415,35.26662)"><rect
     style="display:inline;fill:#333333;stroke-width:1.0543"
     id="rect3"
     width="104.256"
     height="43.391998"
     x="896.54932"
     y="84.394501" /><text
     fill="#be1e2d"
     font-family="Arial"
     font-size="2px"
     id="text10"
     style="font-size:21.3333px;display:inline;fill:#ffffff"
     x="1032.5907"
     y="122.73671"
     inkscape:label="stext10"><tspan
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:21.3333px;font-family:Arial;-inkscape-font-specification:'Arial Bold';fill:#ffffff;stroke:none"
       id="tspan10">L/min</tspan></text><text
     xml:space="preserve"
     style="font-size:32px;line-height:0.85;font-family:'7segments';text-align:center;text-anchor:middle;display:inline;fill:#808080;stroke:none;stroke-width:4.8;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
     x="950.96637"
     y="122.97331"
     id="text37"
     class="dsegg"><tspan
       sodipodi:role="line"
       id="tspan37"
       x="950.96637"
       y="122.97331"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:32px;line-height:0.85;font-family:'7segments';fill:#808080;stroke:none"
       class="dsegg">8.888</tspan></text><text
     xml:space="preserve"
     style="font-size:32px;line-height:0.85;font-family:'7segments';text-align:end;text-anchor:end;display:inline;fill:#d40000;stroke:none;stroke-width:4.8;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"
     x="1000.5992"
     y="122.97331"
     id="sensor.caldera_ic_teda_consum_gas_oil.text"
     class="dsegg"><tspan
       sodipodi:role="line"
       id="tspan7"
       x="1000.5992"
       y="122.97331"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:32px;line-height:0.85;font-family:'7segments';text-align:end;text-anchor:end;fill:#d40000;stroke:none"
       class="dsegg">0,086</tspan></text></g></g>&#10;&#10;</svg>

[Serrallonga25]

The next solution I don't remember where I saw it on a German blog if I remember correctly.

It is to add a font_styles.css and loadfonts.js file as a resource that loads the fonts.

/local/fonts/loadfonts.js

function loadcss() {
    let css = '/local/fonts/font_styles.css?v=0.002'

    let link = document.createElement('link');
    let head = document.getElementsByTagName('head')[0];
    let tmp;
    link.rel = 'stylesheet';
    link.type = 'text/css';

    tmp = link.cloneNode(true);
    tmp.href = css;
    head.appendChild(tmp);
    console.info('%c Font Style sheet loaded', 'color: white; background: #000; font-weight: 700;');
}
loadcss();

/local/fonts/font_styles.css

@font-face {
  font-family: '7segments';
  src: url(/local/fonts/7segments.eot);
  src: url(/local/fonts/7segments.eot?#iefix) format('embedded-opentype'),
       url(/local/fonts/7segments.otf) format('otf'),
       url(/local/fonts/7segments.svg#7segments) format('svg'),
       url(/local/fonts/7segments.ttf) format('truetype'),
       url(/local/fonts/7segments.woff) format('woff'),
       url(/local/fonts/7segments.woff2) format('woff2');
}

Even so, it still didn't load the fonts.
I saw that HA at some point loaded a font called Robot and looking at the debug I found the function it used and added it to loadfonts.js

added /local/fonts/loadfonts.js

function _pf(o,t){
	var n=document.createElement("link");
	n.rel="preload";
	n.as="font";
	n.type="font/woff2";
	n.href=o;
	n.crossOrigin="anonymous";
	document.head.appendChild(n);
}
_pf("/local/fonts/7segments.eot");
_pf("/local/fonts/7segments.otf");
_pf("/local/fonts/7segments.svg");
_pf("/local/fonts/7segments.ttf");
_pf("/local/fonts/7segments.woff");
_pf("/local/fonts/7segments.woff2");

With this code it works and loads the fonts in the browsers. The only place where the font doesn't load is in the android app of ha.

In the browser console I get some warnings.

I don't know if this is the correct way to do it or is there a cleaner way to do it?

[Serrallonga25]

Thanks to this link https://stackoverflow.com/questions/41852594/dynamically-load-fonts

I have discovered a javaScript function to load the font dynamically and with this method it works in the mobile app too.

/local/fonts/loadfonts.js

async function loadFonts(family, myfont) {
  const font = new FontFace(family, "url("+myfont+")", {
    style: "normal",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);
  // enable font with CSS class
  document.body.classList.add("fonts-loaded");
}

//@font-face {
//  font-family: '7segments';
//  src: url(/local/fonts/7segments.eot);
//  src: url(/local/fonts/7segments.eot?#iefix) format('embedded-opentype'),
//       url(/local/fonts/7segments.otf) format('otf'),
//       url(/local/fonts/7segments.svg#7segments) format('svg'),
//       url(/local/fonts/7segments.ttf) format('truetype'),
//       url(/local/fonts/7segments.woff) format('woff'),
//       url(/local/fonts/7segments.woff2) format('woff2');
//}

//loadFonts("7segments", "/local/fonts/7segments.eot");
//loadFonts("7segments", "/local/fonts/7segments.otf");
//loadFonts("7segments", "/local/fonts/7segments.svg#7segments");

loadFonts("7segments", "/local/fonts/7segments.ttf");
loadFonts("7segments", "/local/fonts/7segments.woff");
loadFonts("7segments", "/local/fonts/7segments.woff2");

The warnings came to me because of the .eot, .otf .svg files, which I think should not be compatible.

I don't know who uses them either? And if they are necessary

I don't know if you can think of a more correct way to do it?

I know it's not your problem but it wouldn't be bad if you could load the fonts in an easier way.

Thanks for your work,