SVG with embedded fonts failing to display properly in web browsers

Within this SVG, there are two different font types being used: SymbolMT for the mathematical expressions and Hind-Light for the text.

Both fonts have been defined within the @font-face section of the SVG.

The font used for the math expressions appears as expected, however, the font for the text does not match the Hind-Light font.

These SVGs are embedded in a webpage that also utilizes the "Hind-Light" font.

Here is an example in JSFiddle: https://jsfiddle.net/gde58zw9/

Any suggestions on how to correct the font mismatch for the text?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" width="161.501px" height="64.485px" viewBox="0 0 161.501 64.485" enable-background="new 0 0 161.501 64.485" xml:space="preserve">
    <style type="text/css">
    <![CDATA[
    @font-face {
        font-family: 'Hind-Light';
        src: url('data:font/woff2;charset=utf-8;base64,d09GMgABA') format('woff2'),
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    ]]>
csssvgfonts

Answer №1

The 'Hind Light' is now properly integrated into your jsfiddle example.

To reduce the file size of the base64 chunk, you can specify a subset in the transfonter UI.

https://i.sstatic.net/MwZew.png

However, if you are still encountering an error message for the 'Symbol MT.'

It is challenging to create a usable subset for embedding due to the custom character encoding "MS Windows Symbol" for Symbol MT (at least in the windows version. https://i.sstatic.net/Pu1so.png

Standard fonts display the summation/sigma) symbol as:

∑ = &#x2211; regular font
∑ = &#xF0E5 Symbol MT

(Data obtained from fontdrop)

When using a desktop application, the Symbol MT encoding is converted/remapped.
Upon exporting the SVG, the <text> element utilizes the regular encoding &#x2211;.

Due to 'Symbol MT' not having this codepoint, the 'Times New Roman' summation symbol appears larger as a fallback option.

<span class="times">&#x2211;</span> <span class="symbol">&#xF0E5;</span>

<style>
body{
font-size:10vw;
}

.symbol{
  font-family:Symbol;
}

.times{
    font-family:'Times New Roman', serif
}
</style>

Alternatives

You could encode the original TrueType font in base64 without conversion and change the summation symbol to &#xF0E5 – though this method may be cumbersome.

Check out the working codepen.

Another approach is to install all required fonts ('Hind Light') locally so they are accessible in all applications.
Open your SVG in your editor (Inkscape, Adobe Illustrator etc.). Apply the fonts to your text elements.
Convert all text to paths.

This method often results in smaller files compared to embedding font subsets.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161.5 64.48">
  <path d="M63.89 8.19h-.6V4.91c0-...;

Note: Converting text to paths will disable the ability to select any text since every text element has been converted to <path> elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Only display one div element when in print mode, hiding all others

My print style CSS code includes the following: * { display:none; } #printableArea { display:block; } Initially, I anticipated that this CSS would hide all elements except for the printableArea. Surprisingly, everything on the page became hidden when ...

css

Position the ion-radio element in the middle of the layout

As I work on creating a privacy page in HTML using Ionic 3, my desired output should resemble the following: https://i.sstatic.net/lxzc9.png However, with my current code, the result I'm seeing is different from what I expected: https://i.sstatic.net ...

cssionic-frameworksassionic3

Equal dimensions for multiple div elements in both height and width

Looking to create responsive blocks using jQuery. I have two cube blocks with different widths. After writing a few lines of code to make them responsive, the second block now takes the height of the first div and changes on resize. Check out this example ...

jqueryhtmlcss

Ways to customize the size of a radio button with CSS

Is it possible to adjust the size of a radio button using CSS? ...

htmlcssradio-button

Empty space to the left of the vertical navigation bar

I'm struggling to get rid of the white space on the left side of my vertical navigation bar. I've attempted setting padding-left to 0 on my main navigation bar. This is my first time creating a navigation bar, so if you notice any semantic issu ...

csshtml

Guide to making a slider menu using html, css, and javascript

Just dipping my toes into the world of web development. I'm intrigued by the idea of creating a "slider menu" where users can view and select options by clicking on next or previous buttons (see example image below). While I've got some basic HTM ...

javascripthtmlcss

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png <md-sidenav-layout fullscreen> <md-sidenav #start mode=" ...

htmlcssangularangular-materialangular-material2

Take a break in between keyframe animations

I have a basic animation set up with keyframes. @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(10deg); } 25% { -webkit-transform: rotate(5deg); } 50% { -webkit-transform: rotate(10deg); } 75% { -webkit-transform: ...

animationcss

I am struggling to make my Bootstrap 5 Navbar transparent. Can anyone help me figure this out?

I've been struggling with my Bootstrap Navbar, which appears as white no matter what I do. I've tried numerous solutions from Stack Overflow to make it transparent without any luck. Even after setting the background to transparent and ensuring t ...

htmlcssnavbarbootstrap-5transparent

Is there a way to eliminate the underline in TextField components in Material-UI?

Is there a way to remove the underline from a material-ui TextField without using InputBase? I would prefer to stick with the TextField API, but have not been able to find a solution in the documentation. ...

cssreactjsmaterial-ui

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

htmlcss960.gs

Position Font Awesome to the right of the text in the list

Hi there, I am currently working on a project where I want to align font awesome icons to the right of my text within a list. My website is in a Right-to-Left (RTL) language and I can't seem to find any resources on how to achieve this. Any help would ...

htmlcssfont-awesome

Struggling with aligning and floating links to the right while crafting a custom navigation bar

I'm in the process of crafting a custom navigation bar for my website, with the intention of having my name prominently displayed on the far left while the links float to the far right. I've utilized CSS to style everything within the nav section ...

htmlcss

Is there a way to temporarily halt a CSS animation when it reaches the final frame

Can anyone assist me with getting the "-webkit-animation-fill-mode: forwards;" to work? It seems like it's getting stuck on the first frame, and I can't figure out why. JS FIDDLE <div class="logo"></div> .logo { width: 328px; ...

csscss-animations

Having trouble getting JavaScript to select a stylesheet based on time?

I am attempting to implement two different styles based on the time of day. Here is the code I am using to select the CSS file depending on the current time: <script type="text/javascript"> function setTimedStylesheet() { var currentTim ...

javascripthtmlcss

Utilize the dimensions of one image to resize others using the JavaScript method .getBoundingClientRect

I am attempting to transfer the width and height measurements of the initial image to all subsequent images on the page. Currently, I have successfully applied the dimensions of the first image to the second one, but I am facing difficulties with the thir ...

javascripthtmlcssimage

Tips for resolving issues with the navigation menu not appearing on the website

For more information, please visit the webpage at I am facing an issue where the dropdown menu does not show up when hovering on the Services page. The dropdown menu was created in WordPress using wp_nav_menu. There are 5 pages, including a Services page ...

csswordpressdrop-down-menubootstrap-4navigationbar

Embed a style sheet in the PHP email sending function

Is there a way to integrate an entire stylesheet into an email using PHP's mail() function in order to maintain proper styling? I have a large CSS file designed specifically for CKEditor that needs to be included to ensure the email displays correctly ...

phpcssphpmailer

"Utilizing Bootstrap's form-check feature places the checkbox alongside the text

While attempting to create a checkbox using the Bootstrap form-check class, I encountered an issue with my code. Here is the snippet: <form> <div class="form-section"> <div>Title</div> <div class="form-check"> ...

htmlcssbootstrap-4

What could be causing the vertical centering issue with my text inside a bootstrap row div?

I have a Bootstrap row and I'm attempting to center some text vertically, but it's only centered horizontally. Current Layout: https://i.sstatic.net/XcqHi.png Desired Layout: https://i.sstatic.net/ZegKG.png The second image shows the phrase "c ...

htmlcssalignmentbootstrap-5