Change Font
David Brahka avatar
Written by David Brahka
Updated over a week ago

Via Custom CSS

To change the fonts, open App Settings > Custom CSS and add your custom styles.


Old Method via JS 

To change the font of your Blackbell, open in the CMS the page of :
E-Commerce > Manage > Setup > Content Setup > Custom Javascript

Then add to the BODY SNIPPET textarea:

To change all fonts:

<script  type="text/javascript">

  // Global Variables
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');

  // Add New Google Font
  var font = document.createElement('link');
  font.href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=latin-ext";
  font.rel="stylesheet";
  head.appendChild(font);

  // Custom CSS
  var css = `

  /* HEADLINES ONLY CHANGE */
  .hc-headline,
  .hc-headline p,
  .hc-headline div,
  h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif !important;
  }
  /* END OF - HEADLINES ONLY CHANGE */

  /* EVERYTHING ELSE CHANGE */
  body, div, p, a, span, button, input, textarea, .hc-homeblock__paragraph, .page-text-block{
    font-family: "Open Sans", sans-serif !important;
  }
  /* END OF - EVERYTHING ELSE CHANGE */
   
  `;

  // Add CSS Style to change the Font
  style.type = 'text/css';
  if ( style.styleSheet ) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild( document.createTextNode( css ) );
  }
  head.appendChild( style );
 
</script>


To change only headlines:

<script  type="text/javascript">

  // Global Variables
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');

  // Add New Google Font
  var font = document.createElement('link');
  font.href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=latin-ext";
  font.rel="stylesheet";
  head.appendChild(font);

  // Custom CSS
  var css = `

  /* HEADLINES ONLY CHANGE */
  .hc-headline,
  .hc-headline p,
  .hc-headline div,
  h1, h2, h3, h4, h5, h6 {
    font-family: "Open Sans", sans-serif !important;
  }
  /* END OF - HEADLINES ONLY CHANGE */
   
  `;

  // Add CSS Style to change the Font
  style.type = 'text/css';
  if ( style.styleSheet ) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild( document.createTextNode( css ) );
  }
  head.appendChild( style );
 
</script> 
Did this answer your question?