I can't get Stripe Elements to use Google's Lato. I know there are other questions similar to this one but I don't see anything that applies. I tried fixing this for a while with no luck

var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
  fonts: [
    {
      family: "'Lato'",
      src: 'local("Lato"), local("lato"), url(.woff2) format("woff2")',
      weight: 300,
      style: "normal",
      unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
    }
  ]
});

var card = elements.create('card', {
  iconStyle: 'solid',
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#3cacce',
      color: '#424B54',
      lineHeight: '36px',
      fontWeight: 300,
      fontFamily: '"Lato", sans-serif',
      fontSize: '13pt',
      fontStyle: "normal",
      '::placeholder': {
        color: '#969696'
      },
    },
    invalid: {
      iconColor: '#b32903',
      color: '#b32903',
    }
  },
  classes: {
    focus: 'is-focused',
    empty: 'is-empty',
  },
});

And somewhere else:

card.mount('.cardElement');

Any tips on how I can get this to display properly?

Update:

Found the problem! I was trying to load in Lato Light, but because the normal Lato was added, using 300 wight didn't work. Adding the Lato Light font made it work.

I can't get Stripe Elements to use Google's Lato. I know there are other questions similar to this one but I don't see anything that applies. I tried fixing this for a while with no luck

var windowHash = getWindowHash();
var stripe = Stripe(stripePubKey);
var elements = stripe.elements({
  fonts: [
    {
      family: "'Lato'",
      src: 'local("Lato"), local("lato"), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format("woff2")',
      weight: 300,
      style: "normal",
      unicodeRange: "U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF"
    }
  ]
});

var card = elements.create('card', {
  iconStyle: 'solid',
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#3cacce',
      color: '#424B54',
      lineHeight: '36px',
      fontWeight: 300,
      fontFamily: '"Lato", sans-serif',
      fontSize: '13pt',
      fontStyle: "normal",
      '::placeholder': {
        color: '#969696'
      },
    },
    invalid: {
      iconColor: '#b32903',
      color: '#b32903',
    }
  },
  classes: {
    focus: 'is-focused',
    empty: 'is-empty',
  },
});

And somewhere else:

card.mount('.cardElement');

Any tips on how I can get this to display properly?

Update:

Found the problem! I was trying to load in Lato Light, but because the normal Lato was added, using 300 wight didn't work. Adding the Lato Light font made it work.

• javascript
• stripe-payments

3 Answers 3

You can now use the cssSrc option:

let stripe = Stripe('pk_test_JYjfAwsv9ODbL7mm1qObrIXZ')
let elements = stripe.elements({
  fonts: [
    {
      cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600'
    }
  ]
})

Then you can reference it in in the style options when you create the card:

let card = elements.create('card', {
  style: {
    base: {
      fontFamily: 'Montserrat'            
    }
  }
})
card.mount('#card-element')

Source: https://stripe.com/docs/stripe-js/reference

Reason: Have to use latin link and unicode range. Not the latin-ext font face for Lato font (latin and latin-ext)

Use the following fonts parameters

fonts: [
    {
      family: '"Lato"',
      src: 'local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format("woff2")',
      weight: 300,
      style: 'normal',
      unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215'
    }
  ]

If you're using Elements component you can specify cssSrc option to import external fonts like so.. (the code is written in typescript)

Outside the component

const ELEMENT_OPTIONS: StripeElementsOptions = {
 fonts: [
    {
     cssSrc:
    "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;900",
    },
  ],
};

Inside the component

<Elements stripe={stripePromise} options={ELEMENT_OPTIONS}>
  <StripeCheckoutForm />
</Elements>