Trouble changing Header font in Brand Header Theme

Support

AI-generated summary

User Daniel_Wallace is having trouble changing the header font in the Brand Header Theme Component to their custom font, Harman Sans. Despite uploading the font, they are unsure where to place the CSS code to make the change. IAmGav suggests looking at the CSS for the Material Design Theme for inspiration. Daniel_Wallace shares a link to a detailed guide on including fonts in themes and components, but is still unsure about the implementation. IAmGav clarifies that the code should be placed in the Theme CSS, referencing the uploaded font by name. After following this advice, Daniel_Wallace is able to successfully change the header font.

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.

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 assets (e.g. images, 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
uploaded-font556×230 11.3 KB

5

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