Using Custom Fonts

[jparry67]

I have these stripe elements on a page where everything else is using Google Fonts, and it's frustrating when all the input fields around this one are almost identical but the font is slightly different.

Would it be possible to let the developer pass in a custom css url to import a font? something like this:

export class StylingExampleComponent {
  @ViewChild(StripeCardComponent) card: StripeCardComponent;

  cardOptions: StripeCardElementOptions = {
    iconStyle: 'solid',
    style: {
      base: {
        iconColor: '#c4f0ff',
        color: '#fff',
        fontWeight: 500,
        fontFamily: 'Montserrat, sans-serif',
// basically let the user pass in any css import url here - if that poses a security risk maybe specific ttf file instead somehow?
        cssSrc: 'https://fonts.googleapis.com/css?family=Montserrat:400,500',
        fontSize: '16px',
        fontSmoothing: 'antialiased',
        ':-webkit-autofill': {color: '#fce883'},
        '::placeholder': {color: '#87bbfd'}
      },
      invalid: {
        iconColor: '#ffc7ee',
        color: '#ffc7ee'
      }
    }
  };
}

• Inspired from this stack overflow answer: https://stackoverflow.com/a/56985340/9732740

[jparry67]

I realized this is already possible using the StripeElementsOptions instead of the StripeCardElementOptions.

[zak427zak]

@jparry67 Hi! I have the same problem, I can't solve it. Can you share your code?

[jparry67]

@zak427zak sure! Here is my code:

export class CheckoutRoute implements OnInit {
  cardOptions: StripeCardElementOptions = {
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#000000',
        fontWeight: '400',
        fontFamily: "'Poppins', sans-serif",
        '::placeholder': {
          color: '#7B7B7B',
        },
        fontSize: '13.4px',
        lineHeight: '32px',

      },
    },
  };
  elementsOptions: StripeElementsOptions = {
    locale: 'en',
    fonts: [
      {
        // integrate your font into stripe
        cssSrc: 'https://fonts.googleapis.com/css?family=Poppins:400,500',
      }
    ]
  };

And then in my html I have this:

      <ngx-stripe-card-group class="form-section" [elementsOptions]="elementsOptions">
        <input class="card-input name-input" placeholder="Cardholder Name"/>
        <ngx-stripe-card-number containerClass="card-input" [options]="cardOptions"></ngx-stripe-card-number>
        <div class="input-row">
          <ngx-stripe-card-expiry containerClass="card-input" [options]="cardOptions"></ngx-stripe-card-expiry>
          <ngx-stripe-card-cvc containerClass="card-input" [options]="cardOptions"></ngx-stripe-card-cvc>
        </div>
      </ngx-stripe-card-group>