Custom Widget: Google Font & Content Security Policy

Apps & Services HABPanel
1

Hi, I need some help.
I’m trying to use the online google fonts in a custom widget.

<style>
@import url('https://fonts.googleapis.com/css?family=Tangerine');
.myfont{
   font-family: 'Tangerine', serif;
  font-size: 50px;
  color: black;
  }
 
</style>

<span class="myfont">test</span>

However the browser gives the error below.

Refused to load the stylesheet 'https://fonts.googleapis.com/css?family=Tangerine' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'".

A possible solution for this seems adding the following meta tag into the http header

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com/; object-src 'self'">

But how to do that in habpanel?

Thanks for your feedback.

2

You can’t change the CSP.
Blocking the scripts and styles outside the openHAB server is by design.

Go to https://fonts.googleapis.com/css?family=Tangerine and copy its contents inside your <style> tag, and download the .woff2 file to your $openhab_conf/html folder then change the url to a relative one:

<style>
/* latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: local('Tangerine Regular'), local('Tangerine-Regular'), url(/static/HGfsyCL5WASpHOFnouG-RFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
.myfont{
   font-family: 'Tangerine', serif;
  font-size: 50px;
  color: black;
  }
</style>

<span class="myfont">test</span>
3

This seems to be outdated, now importing works again.