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>