Пользовательские шрифты, размещенные на сервере в SVG [дубликат] ⇐ CSS

[Anonymous]

Проблема:
У меня есть SVG, использующий собственный шрифт. Я хочу, чтобы шрифт был предоставлен сервером. Шрифт заменяется на Times new Roman и не использует предопределенный шрифт.
Структура папок:

Код: Выделить всё

- assets
- fonts
- DejaVuSans-ExtraLight.ttf
- image
- logo-full.svg

Классы CSS
Я попробовал использовать @font-face, чтобы определить расположение шрифтов на сервере, следующим образом:

Код: Выделить всё

@font-face {
font-family : 'DejaVuExtraLight';
src: url('../fonts/DejaVuSans-ExtraLight.ttf') format('truetype');
}

.cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
fill: #223040;
}

.cls-1, .cls-3, .cls-5 {
font-family: 'DejaVuExtraLight', 'DejaVu Sans', Arial, sans.serif;
font-weight: 200;
}

.cls-1, .cls-5 {
font-size: 30px;
}

.cls-6 {
fill: #2e6687;
}

.cls-2, .cls-4 {
font-family: 'Athelas-Regular', Athelas;
font-size: 11px;
}

.cls-3 {
font-size: 27.08px;
letter-spacing: .2em;
}

.cls-3, .cls-7, .cls-5 {
opacity: .95;
}

.cls-8 {
fill: #ee714f;
}

.cls-4, .cls-9 {
letter-spacing: -.07em;
}

.cls-10 {
letter-spacing: 0em;
}

.cls-11 {
letter-spacing: -.09em;
}

.cls-12 {
letter-spacing: -.07em;
}

.cls-13 {
letter-spacing: -.06em;
}

.cls-14 {
letter-spacing: -.15em;
}

.cls-15 {
letter-spacing: -.02em;
}

svg
Эти классы затем используются в моем SVG:

Код: Выделить всё

    


// svg code in here


ecu
r
e


Com


T
r
ad
e


Risk


Miti
g
a
tion


&


.


.


.

Использование в Html
Вот как он используется в моем компоненте vue.js:

Код: Выделить всё

    
[img]../assets/image/logo-full.svg[/img]

Что я пробовал
Я убедился, что шрифт предоставлен

Подробнее здесь: https://stackoverflow.com/questions/792 ... ts-in-svgs