Custom font not displaying in SVG pattern used as background-image

Question

I\'m working with an SVG pattern that uses a custom font, so as to use that pattern as a background image on an HTML page.

Everythi

Answer 1

You are using SVG in an image context. I.e. either via the html <img> tag, the SVG <image> tag or in your case as a background image.

In Firefox (and likely in other UAs at some point) images must consist of a single file only. Any data external to the image file (pattern-google.svg) is ignored. If you display the SVG directly then external data is loaded/used.

So what can you do...

Load the data as a data URI. I.e. base64 encode http://fonts.googleapis.com/css?family=Indie+Flower but read the final paragraph before you do this and then stick that data directly in the svg file itself.

So the import would look like this...

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

Do be careful though because http://fonts.googleapis.com/css?family=Indie+Flower itself has external data so that data itself must itself be encoded as a data URI. I.e. you must go all the way down the rabbit hole. And change that file as I've sketched out 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');
}

Once you've done that you can then encode the whole file as a data URI and @import it.

So, to reiterate step by step...

1. Convert http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff to a data URI
2. Replace http://fonts.googleapis.com/css?family=Indie+Flower with a version that has the data URI from step 1
3. Convert the file in step 2 to a data URI
4. @import the data URI from step 3

There are plenty of sites online that will create data URIs.