Issue with custom font not appearing correctly within SVG pattern background image

I am currently utilizing an SVG design featuring a unique font in order to apply that design as a background image on an HTML page.

While everything displays correctly in Chrome and Safari, Firefox seems to be giving me some trouble:

  • Firefox properly renders the SVG with the custom font when I view the SVG file itself (so far so good!);
  • However, Firefox fails to render the custom font when the same SVG file is used as the background for an HTML element (!)

I have spent hours attempting to pinpoint the issue and would appreciate any fresh insights.

Here is a brief overview of what I have:

CSS:

@import url(http://fonts.googleapis.com/css?family=Indie+Flower);

body {
    background: url(pattern-google.svg);
}

SVG file:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200">
    <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
    <defs>
        <!-- Geometry -->
        <g>
            <rect id="square" x="0" y="0" width="200" height="200" />
        </g>

        <!-- Patterns with Text -->
        <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;">
            <rect x="00" y="00" width="40" height="40" fill="transparent" />
            <text x="00" y="00" fill="#777">S</text>
            <text x="40" y="00" fill="#777">S</text>
            <text x="20" y="20" fill="#777">S</text>
            <text x="00" y="40" fill="#777">S</text>
            <text x="40" y="40" fill="#777">S</text>
        </pattern>
    </defs>

    <!-- Graphics -->
    <use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/>
</svg>

The specific HTML content is not crucial, but it can be found through the provided link. I opted not to create a jsfiddle as I was unable to host the SVG file there.

(Beyond this demonstration, my practical goal is to utilize a customized font for displaying phonetic symbols. (As a background image, aiding individuals in learning them.) Using SVG allows me to avoid the need to convert to bitmap each time a design change is made.)

htmlcssfirefoxsvgbackground-image

Answer №1

You have implemented SVG in an image setting, whether through the html <img> tag, the SVG <image> tag, or as a background image.

In Firefox (and possibly in other browsers eventually), images must be contained within a single file. Any external data linked to the image file (like pattern-google.svg) is disregarded. However, if you directly display the SVG, external data will be utilized/loaded.

Here are some potential solutions...

Option 1: Load the data as a data URI. This entails base64 encoding (but please read the final paragraph before proceeding) and inserting that encoded data directly into the svg file itself.

The import process would resemble this...

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')

Exercise caution because contains external data which also needs to be encoded as a data URI. Essentially, you need to delve deep down the rabbit hole and modify the file as outlined below.

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff');
}

After completing these steps, you can encode the entire file as a data URI and @import it.

To recap the process step by step...

  1. Convert to a data URI
  2. Replace with a version containing the data URI from step 1
  3. Convert the file from step 2 to a data URI
  4. @import the data URI from step 3

There are numerous online tools available for creating data URIs.

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

Custom dropdown selection using solely JavaScript for hidden/unhidden options

I'm trying to simplify things here. I want to create a form that, when completed, will print the page. The form should have 3-4 drop-down lists with yes or no options. Some of the drop-downs will reveal the next hidden div on the form regardless of th ...

javascripthtmlformsdropdown

Adding a dynamic click event in HTML using IONIC 4

I've created a function using Regex to detect URL links and replace them with a span tag. The replacement process is working fine, but I'm facing an issue where when I include (click)="myFunction()" in the span, it doesn't recognize the cli ...

htmltypescriptangular7ionic4

The inline display property does not function properly with the <li> element

Here is the HTML code snippet I am working with: <div class="nav"> <ul class="nav-dots"> <li class='ni n1'><a href="" class='nia'>dot</a></li> <li class='ni n2'><a href="" clas ...

htmlcss

Delete the gridline of the column

I'm struggling to remove the border that is encircling my image thumbnail label. I attempted to create a new class "noborder" and added it under my .col-md-4.noborder css rule, setting the border to 0 none and box-shadow to 0 none but unfortunately it ...

htmlcss

Submenu Positioning Problem Identified in Firefox Display

I am currently working on a menu design for a website and encountered an unusual issue while testing it in Firefox. In the provided fiddle link, you can view the menu layout where hovering over the information button should display a submenu directly below ...

htmlcssfirefox

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

I am currently exploring options to access a webpage, execute JavaScript functions on it (thus altering the HTML content), and eventually save the modified version of the page. I'm uncertain if this approach is feasible, and if not, are there alternat ...

javascriptphphtml

What is the method used by Disqus to adjust the size of its iframe according to the content it contains?

Check out this interesting example article: If you scroll down to the comments section, you'll notice that Disqus inserts an iframe onto the page, and then loads the comments inside the iframe. The intriguing part is that the iframe automatically ad ...

javascriptjqueryhtmlweb-applicationsweb

When the window is resized, the div containing a table is getting pushed beyond its original

I have been developing a 'calculadora de creditos' or credits calculator. For this project, I used a responsive layout. Despite searching extensively online for solutions to my issue, I came up empty-handed. CSS CODE: (CSS code here) HTML CO ...

csshtmlhtml-tablefluid-layout

CSS dropdown fix for improved responsiveness

Check out this Fiddle >> http://jsfiddle.net/fpCpc/`"> jsfiddle Having a problem where the top part of the dropdown navigation doesn't stay active when scrolling down. I even captured a screenshot for clarification! Screenshot Any tips or ...

csshtmldrop-down-menumenuresponsive-design

Handling CSS files on ASP.NET Pages

While ASP.NET can indeed be configured to handle any file type in various ways, most of us have other responsibilities to attend to, even on our days off. I'm currently intrigued by the idea of implementing an ASP.NET handling pipeline specifically fo ...

asp.netcss

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

javascripthtmljquerycssflexbox

The customization of a Wordpress theme is causing an issue: the CSS class cannot be

I have been trying to customize a free version of a popular WordPress theme called EmpowerWP. Despite searching through all the files on the website, I have been unable to find a specific CSS class that I am looking for. As a result, I am considering two ...

javascriptphpcsswordpressthemes

Arrange elements with Material-UI's Grid system

Check out my codesandbox example (here) showcasing how I have set up my current app with Material-UI grid. I have 5 components that need to be positioned in a specific way for different screen sizes. For screens sized lg and above, I want the components t ...

cssreactjsmaterial-ui

Using jQuery to retrieve the ID of a <td> element within an entire table

I'm attempting to retrieve the id of a specific table cell within an entire table structure. For instance, <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> & ...

jqueryhtml

Is there a way to conceal/remove the text displayed on the submit button?

I am facing an issue with a submit button in my PHP code. The button displays an integer value that is crucial for running a script, but I want to hide the value as it interferes with the design using CSS. I have attempted various solutions like removing t ...

phpcss

Developing an HTML table using information from JSON dataset

I am working with an HTML file that includes the following code snippet: <div> <table id="apps"></table> </div> Recently, I started receiving JSON data structured like this: { "1": [ { "A": "", ...

javascriptjqueryhtmljson

Tips on managing scrollbar behavior in Angular UI Grid

In my current project, I am utilizing Angular UI Grid. The grid automatically resizes itself so that all columns fit within a specific div horizontally. While this feature works well initially, it becomes problematic when there are more rows than can fit ...

cssangularjsangular-ui-grid

How to eliminate the inner padding border within a Material UI Outlined Text Field

I am currently utilizing the Material UI v5 Outlined TextField component to develop a form. In the image below, you can see a white padding border appearing in the TextField. I have created CSS that changes the input field color to yellow when focused. Th ...

javascripthtmlcssreactjsmaterial-ui

display directories and subdirectories within a side panel

I have a main folder named 'server'. Inside this folder, there are two subfolders called 'computer1' and 'computer2'. Further inside 'computer1' and 'computer2', there are more folders. Currently, I have a ...

phphtmlfor-loopforeachwhile-loop

Accessing a text document from a specific folder

As a novice in the world of HTML and PHP, I am attempting to develop a script that can access a directory, display all text files within it, allow for editing each file, and save any changes made (all operations will be managed through an HTML form). Howev ...

phphtml