Custom font is not loaded in stripe element

Question

I am specifing custom font for stripe element according to documentation . But stripe input font is differs with other input(same custom font).

I have created simple page with two inputs. First is html <input> , second is stripe elements input. I am specifing custom font for html input and for stripe input. But stripe input font is different(stripe input is second):

Here is js code to create stripe element:

var elements = stripe.elements({
    fonts: [
        {
            cssSrc: 'http://db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular',
        },
    ],
});
var elementStyles = {
    base: {
        fontFamily: 'GT Walsheim Pro Regular',
        fontSize: '25px',
    },
};
var cardNumber = elements.create('cardNumber', {
    style: elementStyles,
});
cardNumber.mount('#example-card-number');

Full reproduce code is available at github repo . Do you have any ideas why input font looks different?

Answer 1

Custom fonts in Stripe have to be loaded over HTTPS. Neither the font-face definition file nor the underlying custom font files are being served securely:

db.onlinewebfonts.com/c/0abeb2471faeb5269db428b9eac2075e?family=GT+Walsheim+Pro+Regular

@font-face {font-family: "GT Walsheim Pro Regular";
    src: url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot"); /* IE9*/
    src: url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff2") format("woff2"), /* chrome firefox */
    url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff") format("woff"), /* chrome firefox */
    url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.svg#GT Walsheim Pro Regular") format("svg"); /* iOS 4.1- */
}

The fix is to serve both the font-face file and an underlying font resources using HTTPs. As a quick example to see it working you can take one of the woff files and provide it to Stripe as follows:

  var elements = stripe.elements({
    fonts: [
      {
        family: "GT Walsheim Pro Regular",
        src:
          "url(https://db.onlinewebfonts.com/t/0abeb2471faeb5269db428b9eac2075e.woff)",
        weight: "500",
      },
    ],
  });

Note that I updated the protocol from one of the resources to https:// .

With this change, the fonts load correctly in the iframe as seen below:

Hope this helps!