Using CSS with HTML Sanitation Turned On - Google API Fonts

If you want to use CSS but HTML sanitation is turned on there is a way around it.  Thanks to Colin Gray for the key to this, we've been able to integrate Google Fonts, Google and Font Awesome Icons, and tons of other fun stuff in our Spotfire files.

The main key to this is to use standard "sanitary" HTML in your text area, put the CSS in a Js window, and refer to it in your HTML inside of <DIV> tags.

The CSS in the Js window must be surrounded with 

var css = `

//THIS IS WHERE YOU PUT YOUR CSS

`;

Please note those are backticks (the "tilde" key), not single quotes.

At the very bottom of the Js window you have to add your CSS to the holder div, so add this code

$("<style/>").text(css).appendTo($("#lobster"));

Where lobster is the name you use to refer to your CSS in your HTML area.  Of course, it doesn't have to be lobster, you can name it anything so long as it's unique to that script.

Finally, in your HTML you start it with a <DIV> tag such as 

 <div id="lobster"></div>

Which refers to your CSS code.  Depending on what you're doing, there may be additional references to your CSS that have to be made in your HTML.  For example, if you want to use the Google font "Lobster" you'd enter the below in the Js window

var css = `


@import url('https://fonts.googleapis.com/css?family=Lobster');

.body {
  font-family: 'Lobster', serif;
  font-size: 78px;
  text-shadow: 4px 4px 4px #aaa;
  color: red;
}
`;

$("<style/>").text(css).appendTo($("#lobster"));

And the below in our HTML window

<div id="lobster"></div>

<div class="body" >This is an example of Lobster font</div>

Note we're referencing both "lobster" and "body".  These have to be unique to the script.  For example, if you want one text area to use Lobster font and another area to use Roboto font, you can't use div tag lobster or div class body in both HTML/Js Windows.

To add an effect such as Fire Animation just add "&effect=fire-animation" to the end of the import url in the Js code.

For example 

var css = `


@import url('https://fonts.googleapis.com/css?family=Creepster&effect=fire-animation');

.body9 {
  font-family: 'Creepster', serif;
  font-size: 28px;
  
  color: blue;
}
`;


$("<style/>").text(css).appendTo($("#creepster"));

Then in your HTML surround the text for which you want to use the effect with a span tag with class="font-effect-effect name" like this 

 <span class="font-effect-fire-animation">The fire effect will be applied to this text</span>

Please note these fonts and effects do work with objects such as calculated values, filters, and document property selectors within text areas.

Here are some further resources for reference, sample dxp attached built-in Spotfire X. 

https://developers.google.com/fonts/docs/getting_started

https://www.w3schools.com/css/css_text.asp

google_fonts.dxp