Changing Broadcast theme to custom font

[Mihaela2208]

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!

[Ankit_Kr]

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; }

[Mihaela2208]

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 - */

[Ankit_Kr]

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

[Mihaela2208]

The website URL is mazillo.com 

[shan_speaks]

Hi, I cannot get mines to display. Does all of this go into the theme.css file? 

@font-face {
font-family: 'The Brande and Lotaline';
src: url('The-Brande-and-Lotaline.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}

h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a { font-family: 'The Brande and Lotaline'!important; }

[Ankit_Kr]

Hi Shan,

Yes, it goes at the bottom of your main CSS file.[I am assuming theme.css is the main CSS file.]

If you share your website URL, then I can have a look and help you out.

[shan_speaks]

www.celestial333.org

[Ankit_Kr]

Have you uploaded the right format files in the asset section of the theme.

[shan_speaks]

 Yes.