Font in SVG

pault
Posts: 62

Font in SVG

Tue Dec 19, 2017 3:28 am

Hi, the font used in SVG images is being replaced by another font in the HTML generated by WebHelp Responsive 19.1 (2017102417). Interestingly, if you open the image in a separate tab, the correct font is displayed. It appears that the font rendered is inherited but I can't find what's doing it or how to stop it.

Here's the code in the SVG:

Code: Select all

<style type="text/css">
   @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700');
   .st0{fill:none;stroke:#000000;stroke-width:2;}
        .st1{fill:none;stroke:#C42127;stroke-width:2;}
   .st2{fill:#C42127;}
   .st3{font-family: 'Roboto Condensed', sans-serif; }
        ...


Here's the URL to page with the image. Notice that the text alignment is off and the font is wrong.
http://docs.datastax.com/en/dse/5.1/dse-arch/datastax_enterprise/dbInternals/dbIntClientRequestsRead.html#dbIntClientRequestsRead__speculative-retry

If you right click the image and open it in a new tab the font is displayed correctly.

I've tried numerous things such defining font in CSS:

Code: Select all

/* Roboto Condensed fonts */
@font-face {
  font-family: "Roboto Condensed";
  src: url("resources/fonts/roboto-condensed-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src: url("resources/fonts/roboto-condensed-v16-latin-regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("resources/fonts/roboto-condensed-v16-latin-regular.woff2") format('woff2'), /* Super Modern Browsers */
       url("resources/fonts/roboto-condensed-v16-latin-regular.woff") format('woff'), /* Modern Browsers */
       url("resources/fonts/roboto-condensed-v16-latin-regular.ttf") format('truetype'), /* Safari, Android, iOS */
       url("resources/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed") format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Roboto Condensed";
    src: url("resources/fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed") format("svg");
  }
}
img, figure, .image {
    font-family: "Roboto Condensed" !important ;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
}


When bringing in the image in as an object it renders properly:

Code: Select all

<object type="image/svg+xml" data="../images/rapidReadProtection.svg"></object>
but the image is not displayed in oXygen Author.

Why is the font specification being overridden and by what?

Thanks for your help.

Paul
bogdan_cercelaru
Posts: 200

Re: Font in SVG

Tue Dec 19, 2017 4:25 pm

Hello,

When SVG images are referred in DITA topic using

Code: Select all

<image href="images/image.svg" />
in the WebHelp output the SVG file are included with the <img/> element. The SVG images linked in HTML files using the <img/> element, may not be rendered properly when other resources are linked from the SVG file. In this case, the font used in the SVG file is linked using

Code: Select all

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700');

To avoid this, you could use the following code

Code: Select all

<svg-container>
     <svgref href="images/image.svg"/>
</svg-container>
in your DITA topic to insert the SVG. In this case, the SVG will be correctly displayed in both, WebHelp output and Oxygen Author mode.

Regards,
Bogdan
Bogdan Cercelaru
<oXygen/> XML Editor, Schema Editor and XSLT Editor/Debugger
http://www.oxygenxml.com
pault
Posts: 62

Re: Font in SVG

Fri Dec 22, 2017 1:45 am

Thanks Bogdan!

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest