Hi fing086,
1/ To change the font on the template:
Step1: you can add your files to the \templates\ja_space\fonts\custom-font folder including the stylesheet.css file, use the following code in this file:
@font-face {
font-family: 'Metropolis';
src: url('metropolis-bold-webfont.woff2') format('woff2'),
url('metropolis-bold-webfont.woff') format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Metropolis';
src: url('metropolis-light-webfont.woff2') format('woff2'),
url('metropolis-light-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Metropolis';
src: url('metropolis-medium-webfont.woff2') format('woff2'),
url('metropolis-medium-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Metropolis';
src: url('metropolis-regular-webfont.woff2') format('woff2'),
url('metropolis-regular-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
Note: Replace the "Metropolis" with your font name.
Step2: add the following code to the \templates\ja_space\etc\assets.xml file, line 10:
<file>fonts/custom-font/stylesheet.css</file>
Step3: Then open the \templates\ja_space\less\variables.less file, and update your font in line 75.
Step4: Go to the Backend > Site template styles > ja_space - Default and click the LESS to CSS button:
2/ To change the masthead color, you can use the following CSS code:
div.ja-masthead .ja-masthead-detail .ja-masthead-title {
background: transparent;
text-fill-color: #000;
-webkit-text-fill-color: #000;
}