title: Stripe Elements Google Web Font Not Working
body: <p>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</p>
  
  <pre><code>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',
    },
  });
  </code></pre>
  
  <p>And somewhere else:</p>
  
  <pre><code>card.mount('.cardElement');
  </code></pre>
  
  <p>Any tips on how I can get this to display properly?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>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.</p>