Не подключается шрифт к SVG

196

04 апреля 2018, 07:10

<svg height='100' width='100' viewBox='-3 -3 100 100' xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"> 
 					<style> 
 	 					.polylogobox { 
 	  					  fill: #ef402a; 
 	  					  transition: .2s; 
 	  					} 
 	  					.polylogobox:hover { 
 	  					  fill: #fff; 
 	  					  stroke: #ef402a; 
 	  					  stroke-width: 3px; 
 	  					} 
 	  					.polylogobox:hover + text { 
 	  					  fill: #ef402a; 
 	  					} 
 	  					.logoletter { 
 	  					  font-size: 26px; 
 	  					  fill: white; 
 	  					  font-family: 'Open Sans', Arial, sans-serif; 
 	  					  transition: .2s; 
 	  					} 
 	  					.logoname { 
 	  					  font-size: 32px; 
 	  					  fill: white; 
 	  					} 
 					</style> 
 					<polygon class='polylogobox' points='22,0 44,0 48,6 72,6 72,46 22,46' /> 
 					<text class='logoletter' x='38' y='36'>E</text> 
 					<text class='logoname' style='font-family: "Open-Sans", Arial;' x='6' y='94'>Expire</text> 
				</svg>

Есть такой SVG код, нужно что бы текст под самой иконкой был определенного шрифта.
В Google подсказывают добавлять инлайн стилем font-family, однако такой способ не привел ни к чему хорошему, шрифт не отображается.
Сам SVG логотип добавлен в таком виде в каком есть, т.е. вставлен напрямую в код svg тегом. Была попытка вставить в тег style в самом svg элементе нужный шрифт, но и так не получилось.
Пытался в главном css-файле страницы прописать стили для svg text, и это не помогло. Причем шрифт 100% подключен к странице, т.к. на других элементах работает.

Как правильно подключать?

Answer 1

Вот посмотрите пример, где решалась аналогичная задача, подключения текста внутри блока svg - здесь

Я добавил рукописный шрифт, чтобы было явно видно, что он подключился. Вы можете выбрать любой другой гугловский шрифт и подключить по аналогии с примером.

.polylogobox { 
	  fill: #ef402a; 
	  transition: .2s; 
	} 
	.polylogobox:hover { 
	  fill: #fff; 
	  stroke: #ef402a; 
	  stroke-width: 3px; 
	} 
	.polylogobox:hover + text { 
	  fill: #ef402a; 
	} 
	.logoletter { 
	  font-size: 26px; 
	  fill: white; 
	   
	  transition: .2s; 
	} 
	.logoname { 
	  font-size: 32px; 
	  fill: black; 
	  font-family: Lobster; 
	} 
	 
	.logoname:hover { 
	  fill: #fff; 
	  stroke: #ef402a; 
	  stroke-width: 1px;

 <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">  
 
<svg height='100' width='100' viewBox='-3 -3 100 100' xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" style="border:1px solid red;"> 
	 
<polygon class='polylogobox' points='22,0 44,0 48,6 72,6 72,46 22,46' /> 
 <text class='logoletter' x='38' y='36'>E</text> 
  <text class='logoname'  x='6' y='90'>Expire</text> 
</svg>