Webfont loader with Google Fonts is not using https

2
votes

I am using webfont loader for fonts on my site, and have the following setup:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" integrity="sha384-pvXSwSU09c+q9mPyY++ygUHWIYRoaxgnJ/JC5wcOzMb/NVVu+IDniiB9qWp3ZNWM" crossorigin="anonymous"></script>

JS

WebFont.load({
  google: {
    families: ['Libre Franklin']
  }
});

And then in my .htaccess I am setting sources for stylesheets as part of my Content Security Policy like so:

style-src 'self' https://fonts.googleapis.com;

But when the site loads the font it is using the http:// source for the font, so it is being blocked by the CSP and I am getting this error message in the console:

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

How can I make sure the site is loading the https:// version of the stylesheet?

1
cssfontswebfontsgoogle-webfontswebfont-loader

1 Answers

0
votes

the library webfonts.js uses location.protocol to adjust the request http or https when your project is in domain under https it will be changed to https