correct font in svg but wrong in html

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP


correct font in svg but wrong in html



I build a logo with my custom font (DimaBarf.ttf) in svg format.
this is my code:


<svg width="276.7" height="93" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
@font-face {
font-family: Barf;
src: url('./DimaBarf.ttf');
}
</style>
</defs>
<g>
<title>background</title>
<rect fill="#fff" height="93" width="276.7" y="0" x="0"/>
</g>
<g>
<title>Layer 1</title>
<rect rx="10" height="65" width="276.5" y="0" x="0" fill="#867965"/>
<text stroke="#000" transform="matrix(4.871815023846745,0,0,5.305484790354967,-1448.1636560162676,-511.74044508859515)" xml:space="preserve" text-anchor="first" font-family="Barf" font-size="24" y="110.4" x="297" stroke-width="0" fill="#d8c7b3">شینکاف</text>
</g>
</svg>



When I open the svg file, it shows my custom font correctly.



but when I add this svg in my html document, my custom font change to default system font.
This is my code in html format:


<div style="width:300px;">
<img src="./data/pictures/logo.svg" alt="logo" class="mx-auto d-block" width="100%" />
</div>









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Visual Studio Code: How to configure includePath for better IntelliSense results

Image
Clash Royale CLAN TAG #URR8PPP Visual Studio Code: How to configure includePath for better IntelliSense results so I am a complete beginner to using Visual Studio Code and I have no clue what I am doing. I've searched around (maybe not enough), but I cant find just a simple explanation for someone like me on how to configure the c_cpp_properties.json file that I am redirected to whenever I click on the yellow lightbulb next to a line that is underlined with a green squiggle. Lightbulb example c_cpp_properties.json I just want to know what to put in the .json to make IntelliSense work properly This question has answers that may be good or bad; the system has marked it active so that they can be reviewed. 2 Answers 2 From: https://code.visualstudio.com/docs/languages/cpp Below you can see that the MinGW C++ include path has been added to browse.path for Windows: { "name": "Win32...
Read more

Spring cloud config client Could not locate PropertySource

Image
Clash Royale CLAN TAG #URR8PPP Spring cloud config client Could not locate PropertySource My config server use natie file system works fine and the dev profile configured contextPath: /config spring: application: name: dcit-config profiles: active: native management: endpoints: web: exposure: include: info, health, metrics metrics: export: atlas: enabled: true --- spring: profiles: native application: name: dcit-config cloud: config: server: native: searchLocations: classpath:/config/ server: port: 2003 eureka: instance: prefer-ip-address: true lease-renewal-interval-in-seconds: 5 lease-expiration-duration-in-seconds: 20 client: serviceUrl: defaultZone: http://dcit:dcit@localhost:1023/eureka registry-fetch-interval-seconds: 10 --- spring: profiles: dev application: name: dcit-config cloud: config: server: git: uri: http://xxx/gi...
Read more

Regex - How to capture all iterations of a repeating pattern?

Image
Clash Royale CLAN TAG #URR8PPP Regex - How to capture all iterations of a repeating pattern? Take a look at this example, I want to capture not just the last iteration (which is 5), but also 2, 3 and 4. It says here: A repeated capturing group will only capture the last iteration. Put a capturing group around the repeated group to capture all iterations... but I don't know how to do this. Since I need this in C++, I was looking for a way to get all iterations of capturing group using some regex functions in C++, but I always end up with same groups which the website finds. How about instruction d((,d)*) ? (IMHO, this is meant in the cited text.) Though, this leaves still the task to separate the inner matches... – Scheff 17 mins ago instruction d((,d)*) Thou...
Read more