May 15, 2020 · Everything svg · Web Design

How to Use Fonts in SVG

So you have an SVG with some text and would like them rendered with your selected fonts, how do you do that? Read on to find out more on how to use fonts in your SVG.

Different ways to embed SVG

You may embed your SVG using inline, object, or img tag, and each of them requires a different approach to embedding fonts, mainly because of limitations for each type of embedding.

Using fonts with inline embedding

For inline, the SVG becomes part of your DOM, and therefore can be easily styled with CSS like any part of your HTML. For example, below we have 3 lines of text with different fonts, and we specify the font family using inline attributes.

<svg xmlns="http://www.w3.org/2000/svg" width="450" height="160" stroke="#000" 
    text-anchor="middle" font-size="24">
    <g stroke="none">
        <text font-family="Roboto Condensed" x="225.5" y="43.42">
            This is a Roboto Condensed font
        </text>
        <text font-family="Open Sans" x="225.5" y="88.42">
            This is a Open Sans font
        </text>
        <text font-family="Anonymous Pro" x="225.5" y="133.42">
            This is a Anonymous Pro font
        </text>
    </g>
</svg>

Styling inline svg with css

You will have to include the fonts on your page, the the browser will automatically load the fonts and render the SVG properly.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i" />
</head>
<body>
<!-- Your inline svg here -->
</body>
</html>
Example of rendered SVG
Example of rendered SVG

Alternatively, you can also use classes, id or tags to style your elements, as below

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i" />
    <style>
        .font_a { font-family: "Roboto Condensed" }
        .font_b { font-family: "Open Sans" }
        .font_c { font-family: "Anonymous Pro" }
    </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="160" stroke="#000" 
    text-anchor="middle" font-size="24">
    <g stroke="none">
        <text class="font_a" x="225.5" y="43.42">
            This is a Roboto Condensed font
        </text>
        <text class="font_b" x="225.5" y="88.42">
            This is a Open Sans font
        </text>
        <text class="font_c" x="225.5" y="133.42">
            This is a Anonymous Pro font
        </text>
    </g>
</svg>
</body>
</html>

Advantages

  • Very easy to use, just include the fonts in your page.
  • If all SVG are inlined, all of them can share the same fonts.

Disadvantages

  • Inlined SVG are not cached.
  • Can be hard to maintain if we have a lot of SVG and differing fonts, as all of them must be included.

Using fonts with Object tags

To use fonts in object tags, you will need to embed font imports into your SVG through the use of style tags:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="150" font-size="24" text-anchor="middle">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400i,700,700i");
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
        @import url("https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i");
    </style>
    <text font-family="Roboto Condensed" x="190" y="32.92">
        This is a Roboto Condensed font
    </text>
    <text font-family="Open Sans" x="190" y="82.92">
        This is a Open Sans font
    </text>
    <text font-family="Anonymous Pro" x="190" y="132.92">
        This is a Anonymous Pro font
    </text>
</svg>
Sample svg with fonts embedded using object tag

Because object tags are allowed to access external fonts, embedding these fonts imports into the SVG will work fine. You cannot import these fonts into your main page once and use it on your object tags, because the SVG inside the object tag will not be able to access these imports.

Simply said, you need to embed these font imports into every SVG file you intended to use with object tags.

Advantages

  • Relatively easy to use fonts on object tags
  • Can refer to external font files

Disadvantages

  • Have to insert font imports

The alternative is to use Nano and insert the fonts automatically using object mode (requires a pro account).

Using fonts with img tags

To use fonts with img tags you will need to embed the fonts, nothing else works.

The hard way

  • Locate the .ttf file for your font
  • Go to an online converter and convert it to base64
  • Embed into your SVG as below
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="150" font-size="24" text-anchor="middle">
    <defs>
        <style>
            @font-face{
                font-family:"Roboto Condensed";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
            @font-face{
                font-family:"Open Sans";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
            @font-face{
                font-family:"Anonymous Pro";
                src:url(data:application/font-woff;charset=utf-8;base64,your_base64_encoded_long_string) format("woff"); 
                font-weight:normal;font-style:normal;
            }
        </style>
    </defs>
        <text font-family="Roboto Condensed" x="190" y="32.92">
        This is a Roboto Condensed font
    </text>
    <text font-family="Open Sans" x="190" y="82.92">
        This is a Open Sans font
    </text>
    <text font-family="Anonymous Pro" x="190" y="132.92">
        This is a Anonymous Pro font
    </text>
</svg>

As you can see, you will need to embed all font weights being used. If you used bold, you will need to embed that, and italics too, if you use it. How do you know you are using it? Unfortunately, you will have to check it yourself, and that's the reason it is called the hard way.

The easy way

To embed fonts into your SVG the easy way:

  • Drop your SVG into Nano

You're done, as Nano will automatically scan and embed fonts only if you need it.

Advantages

  • Everything is encapsulated without the need for external fonts

Disadvantages

  • Can be difficult to embed fonts, unless done using automated tools

I sincerely hoped that the article has helped you to use SVG easier, faster and better.

Like the article? Give the author some claps.

Share it with your friends!
AUTHOR

Thomas Yip

Founder at vecta.io, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...

IF YOU LIKE THIS POST, YOU'LL LIKE THESE TOO

May 07, 2020 · Everything svg · Web design

The best way to make image maps (2020)

Do you have an image with 2 or more buttons that clicks to different destinations. Still using image maps with javascript plugins? Read more to find out how to create responsive image maps the easy way.

December 12, 2018 · Web Design · Everything SVG

The definitive guide to CSS styling order

Ever wondered why your CSS does not apply and require the important keyword instead? Or why SVG editors uses inline attributes instead of CSS style sheets? Read on to find out how styling methods affect what's being applied to your elements.

December 01, 2018 · Web Design · Everything SVG

Responsive images using SVG instead of srcset

It used to be, if you embed an image onto your website, that will be the end of the story. But with the proliferation of high resolutions displays, webmasters all over the world are scrambling to update their websites with high-res images using srcse...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript.

vecta.io BETA