Google font is not displaying in SVG code

Question

On this page , I have an SVG code. The SVG file only shows the basic REGULAR type of font. Though, I have used all font variations (italic, bold, bolditalic, semibold, dark).

I have tried both, @import method and link rel, both within the file and external CSS. Those would be respectively.

@import url('https://fonts.googleapis.com/css?family=Vollkorn:400,400i,600,600i,700,700i,900,900i');

I have also looked into this solution, where it is set within the SVG file with @font-face method (tried bold, regular, etc., to no avail):

Code snippet:

<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 5390.3 959.3" style="enable-background:new 0 0 5390.3 959.3;" xml:space="preserve">
<style type="text/css">
	@import {font-family: 'Vollkorn', serif; src: url('Vollkorn/Vollkorn-Bold.ttf')}
    svg{font-family: 'Vollkorn', serif;}
    .....

Paul LeBeau Paul LeBeau · Accepted Answer · 2018-09-03T10:21:57

Your problem is that, even though your are setting

svg{font-family: 'Vollkorn', serif;}

the classes for your text are over-witing the font family, with rules like the following.

.st22{font-family:'Vollkorn-SemiBold';}

"Volkorn-SemiBold" isn't defined anywhere. Change your classes so that they just use "Volkorn"

.st22{font-family:'Vollkorn';}

or remove them altogether, since they now don't do anything.

Google font is not displaying in SVG code

1 Answers