title: Stripe custom typography font
body: <p>I have a cloud.typography font hosted on my webserver. When I try to link it to stripe using <code>stripe.elements()</code> my fonts do not show up and it defaults to Helvetica. I also do not receive any javascript error.</p>
  
  <p>Here is my javascript code:</p>
  
  <pre><code>var elements = stripe.elements({
      fonts: [
          {
              cssSrc: 'localhost:8080/static/fonts/######/#################.css',
          },
      ],
  });
  var baseStyle = {
      fontFamily: 'Gotham Narrow A, Gotham Narrow B, sans-serif',
      fontSize: '16px',
      lineHeight: '1.5',
      fontWeight: '300',
      color: '#2d3138',
      '::placeholder': {
          color: '#8f95a3'
      }
  };
  var invalidStyle = {
      fontFamily: 'Gotham Narrow A',
      fontSize: '16px',
      lineHeight: '1.5',
      fontWeight: '300',
      color: '#e70000'
  };
  var style = {
      base: baseStyle,
      invalid: invalidStyle
  };
  var styles = {style: style};
  var card = elements.create('cardNumber', styles);
  </code></pre>
  
  <p>If I try and link directly to typography using the css link it gives me, I receive the following error:</p>
  
  <pre><code>Failed to load https://cloud.typography.com/#######/#######/css/fonts.css: 
  Redirect from 'https://cloud.typography.com/#######/#######/css/fonts.css' 
  to 'https://myhostedwebsite.com/fonts/######/#################.css' 
  has been blocked by CORS policy: No 'Access-Control-Allow-Origin' 
  header is present on the requested resource. Origin 'http://localhost:8080' 
  is therefore not allowed access.
  </code></pre>
  
  <p>I have also tried importing my font as a font-family object.</p>
  
  <pre><code>var elements = stripe.elements({
      fonts: [
          {
              family: 'Gotham Narrow A',
              src: 'url(https://myhostedwebsite.com/fonts/######/#################.eot)',
              style: 'normal',
              weight: '300',
          },
      ],
  });
  </code></pre>
  
  <p>Please help.</p>