admin管理员组文章数量:1122832
My web page uses a font (Omnes Pro) which is not included with most operating systems. This is obviously not a problem for the most part because I can just load it in the css file from an OTF file with:
@font-face {
font-family: "Omnes Pro Bold";
src: url("fonts/Omnes_Pro_Bold.otf") format("opentype");
}
However, I'm not sure how to get this custom font to be used by the SVG file.
As it stands, when I display the image including text which uses the font using an img tag with HTML, it just shows the text as some default font instead of the expected font set within the SVG.
I expected that this would just pull from the CSS loading the font, but I'd guess that the SVG isn't referencing the right place to get the font from the CSS, I'm not entirely sure what's going on though, so that's why I'm here!
As an additional note on the same topic, I need to be able to edit the contents of some of these text elements using JavaScript, pointers towards how to achieve that would be helpful, if not I'll spend some proper time researching and possibly post a seperate question.
I have seen this post but I'm not sure how it applies to my problem because I am not using the svg tag, I just have a file which I created in Inkscape, I haven't created this SVG with code. If it helps, this is an example text element from the file:
<text
xml:space="preserve"
style="font-size:22.5778px;line-height:0.9;font-family:'Omnes Pro';-inkscape-font-specification:'Omnes Pro';direction:rtl;fill:#000000;fill-opacity:1;stroke-width:0.545999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.4;stroke-dasharray:1.05833, 0.264583"
x="71.448624"
y="103.02882"
id="text16-2-2"
inkscape:label="Second"><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.87778px;font-family:'Omnes Pro';-inkscape-font-specification:'Omnes Pro, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;direction:ltr;text-anchor:end;stroke-width:0.546"
x="73.127846"
y="103.02882"
id="tspan17-4-3">Second </tspan></text>
I've also seen recommendations to convert the text elements to paths, but that doesn't work in my case because I need to be able to edit the text later using code, which could make things very complicated as I'd need my code to be able to create text elements with the right font anyways, then convert them to paths using JS since it has to be dynamic.
Effectively, my goal is an image with dynamic text elements, if there's a better way of doing that than SVGs please let me know, this is just the best way I could think of doing it with my skill set.
My web page uses a font (Omnes Pro) which is not included with most operating systems. This is obviously not a problem for the most part because I can just load it in the css file from an OTF file with:
@font-face {
font-family: "Omnes Pro Bold";
src: url("fonts/Omnes_Pro_Bold.otf") format("opentype");
}
However, I'm not sure how to get this custom font to be used by the SVG file.
As it stands, when I display the image including text which uses the font using an img tag with HTML, it just shows the text as some default font instead of the expected font set within the SVG.
I expected that this would just pull from the CSS loading the font, but I'd guess that the SVG isn't referencing the right place to get the font from the CSS, I'm not entirely sure what's going on though, so that's why I'm here!
As an additional note on the same topic, I need to be able to edit the contents of some of these text elements using JavaScript, pointers towards how to achieve that would be helpful, if not I'll spend some proper time researching and possibly post a seperate question.
I have seen this post but I'm not sure how it applies to my problem because I am not using the svg tag, I just have a file which I created in Inkscape, I haven't created this SVG with code. If it helps, this is an example text element from the file:
<text
xml:space="preserve"
style="font-size:22.5778px;line-height:0.9;font-family:'Omnes Pro';-inkscape-font-specification:'Omnes Pro';direction:rtl;fill:#000000;fill-opacity:1;stroke-width:0.545999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.4;stroke-dasharray:1.05833, 0.264583"
x="71.448624"
y="103.02882"
id="text16-2-2"
inkscape:label="Second"><tspan
sodipodi:role="line"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:9.87778px;font-family:'Omnes Pro';-inkscape-font-specification:'Omnes Pro, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;direction:ltr;text-anchor:end;stroke-width:0.546"
x="73.127846"
y="103.02882"
id="tspan17-4-3">Second </tspan></text>
I've also seen recommendations to convert the text elements to paths, but that doesn't work in my case because I need to be able to edit the text later using code, which could make things very complicated as I'd need my code to be able to create text elements with the right font anyways, then convert them to paths using JS since it has to be dynamic.
Effectively, my goal is an image with dynamic text elements, if there's a better way of doing that than SVGs please let me know, this is just the best way I could think of doing it with my skill set.
Share Improve this question edited Nov 23, 2024 at 11:38 Lordimass asked Nov 21, 2024 at 19:43 LordimassLordimass 1572 gold badges2 silver badges13 bronze badges 5 |1 Answer
Reset to default -3Embed the font directly into the svg.
For example:
<svg width="200" height="100">
<defs>
<font id="OmnesProBold">
<font-face
font-family="OmnesProBold"
units-per-em="1000"
panose-1="0 0 0 0 0 0 0 0 0 0"
>
<font-face-src>
<font-face-uri src="fonts/Omnes_Pro_Bold.otf"/>
</font-face-src>
</font-face>
</font>
</defs>
<text x="10" y="50" font-family="OmnesProBold" font-size="20">This text uses Omnes Pro Bold</text>
</svg>
本文标签： htmlHow do I use a custom font in an SVG embedded in a webpageStack Overflow
版权声明：本文标题：html - How do I use a custom font in an SVG embedded in a webpage? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736307626a1933379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
<img>tag wont't work as images need to be selfcontained (with fonts embedded as base64 encoded data URLs). You can inline your SVG directly in HTML, load a font and manipulate it with JS. Otherwise you could create a web component or use an object tag with inlined JS. – herrstrietzel Commented Nov 23, 2024 at 16:21styleproperty which hasfont-familyas an attribute, it still refers only to a font on my system though, changing it to a font specified in the CSS doesn't work (goes to default). Could you elaborate on how I get it to use that custom font a little please? – Lordimass Commented Nov 25, 2024 at 16:05