Font in SVG
Posted: 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:
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:
When bringing in the image in as an object it renders properly:
but the image is not displayed in oXygen Author.
Why is the font specification being overridden and by what?
Thanks for your help.
Paul
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; }
...
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;
}
Code: Select all
<object type="image/svg+xml" data="../images/rapidReadProtection.svg"></object>
Why is the font specification being overridden and by what?
Thanks for your help.
Paul