Changing Broadcast theme to custom font

Mihaela2208
New Member
5 0 1

Hi,

I managed to install my custom font (DM Sans) to the Broadcast theme, however it only changed the font of the body text and the heading. The font on my menu and some other parts of the website stays the same. How can I change absolutely everything on my theme to my custom font?

 

Thanks!

0 Likes
Ankit-YR
Shopify Expert
4 0 0

Can you share what CSS changes you have applied to your theme?

Below is the general method to applying the custom font to a store.

Remove the comments and any format that doesn't apply. For example, if you don't have 'EOT' format, just remove that.

/* #Font-Face
================================================== */
/*     This is the proper syntax for an @font-face file.
    Upload your font files to Assets and then
        copy your FontName into code below and remove
        comment brackets */
    @font-face {
        font-family: 'FontName';
        src: url('FontName.eot');
        src: url('FontName.eot?iefix') format('eot'),
             url('FontName.woff') format('woff'),
             url('FontName.ttf') format('truetype'),
             url('FontName.svg#webfontZam02nTh') format('svg');
        font-weight: normal;
        font-style: normal; }



Then apply that font to the various elements using custom CSS in the styles liquid file (also in the Assets folder). If you would like to use that font for headings, you can add this to the bottom of the file:

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle { font-family: 'FontName' !important; }

 

0 Likes
Mihaela2208
New Member
5 0 1

Hi,

That is the code I added which is stated in the instructions from the Theme documentation. However, the font the my header menu and any kind of menus is not the same.

Unfortunately your suggestion did not work either.

 

/* -- code to use custom font-family in theme content -- */
p, ul li, ul li a {
  font-family: "DM Sans",sans-serif; }
/* - end - */

/* -- code to use custom font-family in theme headings -- */
h1,h2,h3,h4,h5,h6,.article__tags,.blog .article__image .article__tags,.article--single .article__meta,.article--single .article__tags,.article__author-bio h3,.editorial__meta {
    font-family: "Gotham",sans-serif;
}
/* - end - */

 

0 Likes
Ankit-YR
Shopify Expert
4 0 0

@Mihaela2208 If you can share your website URL then I can take a look at the code and provide you with a solution.

 

0 Likes
Mihaela2208
New Member
5 0 1

The website URL is mazillo.com 

0 Likes