Website: Barrier- Responsive Bootstrap Business Website Template (HTML5, CSS3, JS)
Mobile & UI: Axis Mobile App Google Material Design UI (PSD)

Typography & Code: Payment WebFonts


Typography has always been an important part of good design, branding, and readability and web fonts offer many additional benefits: the text is selectable, searchable, zoomable, and high-DPI friendly

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the <font> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities. - Web typography

Implementation webfonts

    You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

    A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');

    link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

    Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

p { font-family: 'MyWebFont', Arial, sans-serif; }

PaymentFont was originally made for our WooCommerce Payment Methods Plugin for WordPress and WooCommerce. At the end we decided to publish it, and here you are! You can see the plugin in action here.

... incomplete list of the included icons: Amazon, American Express, Apple Pay, ATM, Bancontact/Mister Cash, Bank Transfer, Bankomat, Bitcoin, Braintree, Carta Si, Cash, Cash on Delivery, Cash on Pickup, cashcloud, CB, Cirrus, ClickAndBuy, Credit Card, Dankort, Diners Club, Discover, EC Electronic Cash, elo, EPS, Fattura, Facture, Flattr, Giropay, Gratipay, Google Wallet, Ideal, Invoice, JCB, Maestro, Mastercard, Mastercard Securecode, Mercado Pago, Moip, Multibanco, Ogone, pagseguro, Paybox, Paylife, Paymill, PayPal, paysafecard, payshop, PayU, postepay, Quick, Rechnung, Invoice, Ripple, Sage, SEPA, SIX, Skrill, SofortÜberweisung, Square, Stripe, Truste, Unionpay, Verified By Visa, Verisign, Visa, Visa Electron, Western Union, Wirecard

This freebie is a great package for starters, save your time using this small kit on your next project!


Typography & Code: Payment WebFonts

Created by PaymentFont / Vendocrat.

Enjoy this freebie and want to show support? Spread the word.

Share & Like is appreciated!

We hope you enjoy this freebie and find it useful!

Tags: payment , webfonts, wordpress, woocommerce, commerce, ecommerce, sale, shop, amazon, american express, apple pay, atm, bancontact/mister cash, bank transfer, bankomat, bitcoin, braintree, carta si, cash, cash on delivery, cash on pickup, cashcloud, cb, cirrus, clickandbuy, credit card, dankort, diners club, discover, ec electronic cash, elo, eps, fattura, facture, flattr, giropay, gratipay, google wallet, ideal, invoice, jcb, maestro, mastercard, mastercard securecode, mercado pago, moip, multibanco, ogone, pagseguro, paybox, paylife, paymill, paypal, paysafecard, payshop, payu, postepay, quick, rechnung, invoice, ripple, sage, sepa, six, skrill, sofortÜberweisung, square, stripe, truste, unionpay, verified by visa, verisign, visa, visa electron, western union, wirecard

Leave a Comment

No Comment

© Creative3x Ltd.