Please see our updated documentation for Boombox Version 2 and our Migration Guide.

Okay
  Print

How to Add custom font in Boombox theme

You have two ways for adding custom fonts in Boombox:

1. Either you can add your local fonts. For that you need to perform the following steps:

a) Go to your child theme and create a folder with name 'fonts' listing your local fonts. 

b) Add the following code in your child theme css file with declaration of your fonts!

/* -- Local Fonts Declaration -- */
/* Light Font */
@font-face {      font-family: 'Roboto Condensed', Times, serif;    font-style: normal;    font-weight: 300;    src: url(fonts/RobotoCondensed-Light.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 300;    src: url(fonts/RobotoCondensed-LightItalic.ttf);
}
/* Normal Font */
@font-face {      font-family: 'Roboto Condensed';    font-style: normal;    font-weight: 400;    src: url(fonts/RobotoCondensed-Regular.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 400;    src: url(fonts/RobotoCondensed-Italic.ttf);
}
/* Bold Font */
@font-face {      font-family: 'Roboto Condensed';    font-style: normal;    font-weight: 700;    src: url(fonts/RobotoCondensed-Bold.ttf);
}
@font-face {      font-family: 'Roboto Condensed';    font-style: italic;    font-weight: 700;    src: url(fonts/RobotoCondensed-BoldItalic.ttf);
}

c) Add the following code in your child theme css file for changing Boombox Fonts:

/* -- Fonts Application in Boombox -- */
/* Base font family */
body, html,
#cancel-comment-reply-link,
#comments .comments-title span {      font-family: 'Roboto Condensed', sans-serif;
}
/* Branding font family */
#branding h1 {      font-family: 'Roboto Condensed', sans-serif;
}
/* Post heading font family */
.entry-title {      font-family: 'Roboto Condensed', sans-serif;
}
/* Secondary font family */
.pagination, .page-links,.vp_dash_pagina,
.comments-area h3,[class*=" mashicon-"] .text, [class^=mashicon-] .text,
.entry-no-lg,.reaction-box .title,
.reaction-item .reaction-vote-btn,
#comments .comments-title, #comments .comment-reply-title,
.page-trending .trending-navigation ul li a,
.vp-entry legend,.widget-title,
.badge .text,.post-number,
.more_items_x legend, .more_items legend, .more_items_glow,
section.error-404 .text,
.inline-popup .title,
.authentication .title,
.other-posts .title,
.post-share-box h2,
.page-header h1 {      font-family: 'Roboto Condensed', sans-serif;
}

Please note that if you need, you can use different fonts for each area: Base font family, Branding font family, Post heading font family,  Secondary font family. You just need to add declarations for the appropriate fonts like it is explained in a) point.

NOTE: When using local fonts please be sure to use the format that is supported by major browsers. To have more information about browser support of fonts,  please go by the following url: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

2. Or you can import and use google fonts For importing google fonts you just need to add the following line of code either in your child theme css file or site=>Customize=>Additional CSS:

/* -- Google Fonts Import -- */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i');

After that you need to change Boombox fonts to use imported google fonts using code provided in 1=> c) point!

P.S. For more help please see the following example: https://drive.google.com/file/d/0B9a11-1Vd1T2SmVaRjlQVWJ3Z28/view?usp=sharing, which uses combination of local fonts and google fonts!

Please let us know if you need our further assistance or if you have more questions!