Custom Fonts with B2B Direct

Custom fonts can help your match your organizations brand guidelines or improve your site users experience when navigating your B2B Direct site. You will need to know HTML + CSS. Check out our tutorial here on CSS for Sell Theme & Default + Minimal Theme.

Prerequisites

For maximum browser compatibility, ensure you have your font files in the following formats. At a minimum, only ttf can be used but ideally you have all font types so that older internet browsers can enjoy your custom fonts. Looking for free custom fonts?...check out Google Fonts

• eott
• woff
• woff2
• ttf
• svg
  
  1. Using the Asset Library, upload a new Folder named 'fonts' and then upload your font files into that folder or source them from a 3rd party URL. If you are not using Asset Library to host your font files and decide to use a 3rd party, you may need to update your B2B Direct sites content security policy by following this tutorial

2. Using our starter code (or your own code), deploy it to the top of B2B Direct's stylesheet. Once logged in, under Settings > Site Configuration > on the right hand side you will notice Appearance. Under Appearance notice CSS icons, click Edit. Within the pop up, insert your CSS code and click Add and then Save

- Be sure to adjust the "url" to match the urls for the font files you uploaded or are sourcing from step 1.

- Make the property "font-family" your preferred name. In our starter code, we called it "MyFontName"

@font-face {
font-family: "MyFontName";
src: url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.eot"); /* IE9 Compat Modes */
src: url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.otf") format("opentype"), /* Open Type Font */
url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.svg") format("svg"), /* Legacy iOS */
url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.ttf") format("truetype"), /* Safari, Android, iOS */
url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.woff") format("woff"), /* Modern Browsers */
url("https://b2bbucket.s3.amazonaws.com/XXXX/font/MyFont.woff2") format("woff2"); /* Modern Browsers */
font-weight: normal;
font-style: normal;
}

If you are only using ttf font type, here is the starter code

@font-face {
font-family: "PermanentMarker";
src: url("https://b2bbucket.s3.amazonaws.com/3142/fonts/PermanentMarker-Regular.ttf") format("truetype"); /* TTF */
font-weight: normal;
font-style: normal;
}

3. Now you can adjust elements accordingly. For example, in our starter code below, you can see we use are adjusting all the font within the body element. We also included the fallback fonts of Roboto and sans-serif.

body {
font-family: 'MyFontName',Roboto,sans-serif;
color: #282828;
}

Be sure to check out our tutorial here on CSS for B2B Direct for Sell Theme & Default + Minimal Theme.

Font adjustments can be made at the site level, page level or even in-line.

For further assistance with custom fonts, please email support@junipercommerce.com