Page 1 of 1

Font in SVG

Posted: Tue Dec 19, 2017 3:28 am
by pault
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 ... tive-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

Re: Font in SVG

Posted: Tue Dec 19, 2017 4:25 pm
by bogdan_cercelaru
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

Re: Font in SVG

Posted: Fri Dec 22, 2017 1:45 am
by pault
Thanks Bogdan!