Trouble changing Header font in Brand Header Theme

Support
1

I installed the Brand Header Theme Component. It looks great! Now I want to change the title text to my brand font, which is Harman Sans.

  • I uploaded the font itself.
  • When I try to change the CSS, I seem to break the text.

I see the instructions on using a custom font elsewhere in this forum, but I’m unsure where to put the different components from those instructions.

I’m looking at my CSS and I’m not sure what to edit:

@import "theme_variables";

    .b-header {
      width: 100%;
      background-color: $tertiary;
      height: 48px;
      margin-bottom: 0;

      .contents {
        margin: 8px 0;
      }

      .title {
        float: left;
        margin-right: 24px;
        a {
          color: $secondary;
        }
        &:visited {
          color: $secondary;
        }
        .rtl & {
          float: right;
          margin-left: 24px;
          margin-right: 0;
        }
      }
2

if you go look at the CSS for the Material Design Theme, you will see what they did with the font there.

2 Likes
3

I just looked. It’s very clean! But I don’t think I can do that – I’m not using a Google Font. I have to upload the font as an asset (which I’ve done) – and then point it at the header.

I’m trying to make sense of this advice, here: Include images and fonts in themes and components

It’s detailed! I just don’t know where I should put these pieces of text.

4

You place that into your Theme CSS and use the name in your uploads.

Named like this pic

uploaded-font

5

I was taking the instructions too literally. Now it works! Thank you again!

1 Like