excuse me for my question which may seem naive for many of you but I created svg file using inkscape and I am trying to include websafe font in it here is my svg file xml:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 488.15625 20.902084"
   height="79"
   width="1845">
 <defs>
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Kalam');</style>
</defs>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-276.09788)"
     id="layer1">
    <flowRoot
       transform="matrix(3.3345187,0,0,0.06651964,-9.573909,273.74952)"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;image-rendering:auto"
       id="flowRoot602"
       xml:space="preserve"><flowRegion
         id="flowRegion604"><rect
           y="4.2857141"
           x="2.8571429"
           height="845.71429"
           width="1848.5714"
           id="rect606" /></flowRegion><flowPara
         id="flowPara6407"
         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:14.9809618px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRoot>    <flowRoot
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
       id="flowRoot6397"
       xml:space="preserve"><flowRegion
         id="flowRegion6399"><rect
           y="687.14288"
           x="702.85712"
           height="85.714287"
           width="11.428572"
           id="rect6401" /></flowRegion><flowPara
         id="flowPara6403"></flowPara></flowRoot>    <flowRoot
       style="fill:black;fill-opacity:1;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;letter-spacing:0px;word-spacing:0px"
       id="flowRoot7660"
       xml:space="preserve"><flowRegion
         id="flowRegion7662"><rect
           y="2.2284067"
           x="2.0203052"
           height="74.751289"
           width="1837.4675"
           id="rect7664" /></flowRegion><flowPara
         id="flowPara7666"></flowPara></flowRoot>    <text
       id="text7670"
       y="280.42926"
       x="0.53453898"
       style="font-style:normal;font-weight:normal;font-size:10.58333302px;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;"
       xml:space="preserve"><tspan
         id="tspan7676"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:1.76388884px;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26458332;"
         y="289.79303"
         x="0.53453898" /></text>
    <flowRoot
       style="fill:black;fill-opacity:1;stroke:none;font-family:sans-serif;font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;letter-spacing:0px;word-spacing:0px"
       id="flowRoot7680"
       xml:space="preserve"><flowRegion
         id="flowRegion7682"><rect
           y="6.2690167"
           x="1.0101526"
           height="742.4621"
           width="1904.1376"
           id="rect7684" /></flowRegion><flowPara
         id="flowPara7686"></flowPara></flowRoot>    <text
       id="text7690"
       y="279.98032"
       x="172.13858"
       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:0.5;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       xml:space="preserve"><tspan
         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.11527777px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;word-spacing:0.79374999px;writing-mode:lr-tb;text-anchor:start;fill:#0000ff;stroke-width:0.26458332"
         y="279.98032"
         x="172.13858"
         id="tspan7688">Done reading your book</tspan><tspan
         id="tspan7696"
         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.11527777px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;word-spacing:0.79374999px;writing-mode:lr-tb;text-anchor:start;fill:#008000;stroke-width:0.26458332"
         y="285.27197"
         x="172.13858">                     Make a legacy</tspan><tspan
         id="tspan7698"
         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.11527777px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;word-spacing:0.79374999px;writing-mode:lr-tb;text-anchor:start;fill:#d40000;stroke-width:0.26458332"
         y="290.56366"
         x="172.13858">                                 Donate your book to someone else online </tspan><tspan
         id="tspan7700"
         style="font-style:italic;font-variant:normal;font-weight:500;font-stretch:normal;font-size:5.11527777px;font-family:'URW Chancery L';-inkscape-font-specification:'URW Chancery L, Medium Italic';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;word-spacing:0.79374999px;writing-mode:lr-tb;text-anchor:start;fill:#550000;stroke-width:0.26458332"
         y="295.85532"
         x="172.13858">       Great way to make difference and save the environment</tspan></text>
    <text
       id="text7694"
       y="279.91547"
       x="1.889881"
       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
       xml:space="preserve"><tspan
         style="stroke-width:0.26458332"
         y="289.27924"
         x="1.889881"
         id="tspan7692" /></text>
  </g>
</svg>

as you see I added:

<defs>
<style type="text/css">@import url(https://fonts.googleapis.com/css?family=Kalam');</style>
</defs>

but the font is not changing to the font I expect it stay the same old one. what am I doing wrong? how to fix it?

  • This is not what web-safe font means, you're trying to load a custom font. Web-safe are the default fonts available across all devices. – Luciano Sep 14 at 11:07
up vote 0 down vote accepted

You only changed one part of your code. You added the @import but there's not a single font-family that calls your custom font. As soon as you fix that, it should work. Something like font-family: 'Kalam' somewhere in your SVG.

Your Answer

 
discard

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.