Как подключить из CSS шрифт к SVG

Question

На первом изображении не подтянутый шрифт

На во втором изображении, как должен выглядеть сам логотип с примененным шрифтом

Подключение самого шрифта осуществляю через стили css но фото самого логотипа подключаю через свойство background-image.

Мне нужно подключить svg с примененным шрифтом

CSS
@font-face {
    font-family: "MyriadPro-Regular";
    src: url(../fonts/MyriadPro-Regular.otf);
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 3000 3000" style="enable-background:new 0 0 3000 3000;" xml:space="preserve">
<style type="text/css">
    .st0{opacity:0.2;fill:#FECA16;}
    .st1{opacity:0.3;fill:#D6EDF7;}
    .st2{opacity:0.25;fill:#E7A6CB;}
    .st3{fill:#124048;}
    .st4{font-family:'MyriadPro-Regular';}
    .st5{font-size:1275.3042px;}
    .st6{fill:#D88BB4;}
    .st7{font-size:1275.3038px;}
</style>
<text transform="matrix(1 0 0 1 -2033.9785 -1114.8296)" class="st4" style="display:none; font-size:12px;">УAловите свое</text>
<g>
    <path class="st0" d="M1002.7,929.9c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1248.8,929.9,1002.7,929.9z M1002.7,1766C787,1766,612,1591.1,612,1375.3S787,984.7,1002.7,984.7s390.7,174.9,390.7,390.7
        S1218.5,1766,1002.7,1766z"/>
    <path class="st1" d="M1258.4,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1504.5,1320.5,1258.4,1320.5z M1258.4,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S1474.2,2156.7,1258.4,2156.7z"/>
    <path class="st2" d="M611.7,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S857.8,1320.5,611.7,1320.5z M611.7,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S827.5,2156.7,611.7,2156.7z"/>
    <g>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 370.7987 1977.4373)" class="st3 st4 st5">E</text>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 573.8547 2211.6697)" class="st6 st4 st7">F</text>
    </g>
</g>
</svg>

Answer 1

К сожалению шрифт MyriadPro-Regular является платным Adobe шрифтом - 35$
Если вы делаете лого для вебсайта, то лучше его не использовать или купить.

Но можно подобрать бесплатный аналог этому шрифту - Open Sans

В этом случае подключение шрифта из HTML

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700;800&display=swap" rel="stylesheet">
    <link href="google-font.css" rel="stylesheet" type="text/css">

CSS

.st4{font-family: 'Open Sans', sans-serif;}
    .st5{font-size:900px;}
    .st6{fill:#D88BB4;}
    .st7{font-size:900px;}

Полный код:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600;700;800&display=swap" rel="stylesheet">
    <link href="google-font.css" rel="stylesheet" type="text/css"> 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 3000 3000" style="enable-background:new 0 0 3000 3000;" xml:space="preserve">
<style type="text/css">
    .st0{opacity:0.2;fill:#FECA16;}
    .st1{opacity:0.3;fill:#D6EDF7;}
    .st2{opacity:0.25;fill:#E7A6CB;}
    .st3{fill:#124048;}
    .st4{font-family: 'Open Sans', sans-serif;}
    .st5{font-size:1275.3042px;}
    .st6{fill:#D88BB4;}
    .st7{font-size:1275.3038px;}
</style>
<text transform="matrix(1 0 0 1 -2033.9785 -1114.8296)" class="st4" style="display:none; font-size:12px;">УAловите свое</text>
<g>
    <path class="st0" d="M1002.7,929.9c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1248.8,929.9,1002.7,929.9z M1002.7,1766C787,1766,612,1591.1,612,1375.3S787,984.7,1002.7,984.7s390.7,174.9,390.7,390.7
        S1218.5,1766,1002.7,1766z"/>
    <path class="st1" d="M1258.4,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1504.5,1320.5,1258.4,1320.5z M1258.4,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S1474.2,2156.7,1258.4,2156.7z"/>
    <path class="st2" d="M611.7,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S857.8,1320.5,611.7,1320.5z M611.7,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S827.5,2156.7,611.7,2156.7z"/>
    <g>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 370.7987 1977.4373)" class="st3 st4 st5">E</text>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 573.8547 2211.6697)" class="st6 st4 st7">F</text>
    </g>
</g>
</svg>

Пример со шрифтом Lobster

<link href='https://fonts.googleapis.com/css?family=Lobster|Raleway' rel='stylesheet' type='text/css'>
    <link href="google-font.css" rel="stylesheet" type="text/css"> 
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 3000 3000" style="enable-background:new 0 0 3000 3000;" xml:space="preserve">
<style type="text/css">
    .st0{opacity:0.2;fill:#FECA16;}
    .st1{opacity:0.3;fill:#D6EDF7;}
    .st2{opacity:0.25;fill:#E7A6CB;}
    .st3{fill:#124048;}
    .st4{font-family: Lobster;}
    .st5{font-size:1275.3042px;}
    .st6{fill:#D88BB4;}
    .st7{font-size:1275.3038px}
</style>
<text transform="matrix(1 0 0 1 -2033.9785 -1114.8296)" class="st4" style="display:none; font-size:12px;">УAловите свое</text>
<g>
    <path class="st0" d="M1002.7,929.9c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1248.8,929.9,1002.7,929.9z M1002.7,1766C787,1766,612,1591.1,612,1375.3S787,984.7,1002.7,984.7s390.7,174.9,390.7,390.7
        S1218.5,1766,1002.7,1766z"/>
    <path class="st1" d="M1258.4,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S1504.5,1320.5,1258.4,1320.5z M1258.4,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S1474.2,2156.7,1258.4,2156.7z"/>
    <path class="st2" d="M611.7,1320.5c-246.1,0-445.6,199.5-445.6,445.6s199.5,445.6,445.6,445.6s445.6-199.5,445.6-445.6
        S857.8,1320.5,611.7,1320.5z M611.7,2156.7c-215.8,0-390.7-174.9-390.7-390.7s174.9-390.7,390.7-390.7s390.7,174.9,390.7,390.7
        S827.5,2156.7,611.7,2156.7z"/>
    <g>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 370.7987 1977.4373)" class="st3 st4 st5">E</text>
        <text transform="matrix(1.3218 0 -0.2588 0.9659 573.8547 2211.6697)" class="st6 st4 st7">F</text>
    </g>
</g>
</svg>

БЛОГ НА HUSL

Как подключить из CSS шрифт к SVG

Ответы (1 шт):