Is there a way to specify a different font for just the tab and header text?

[Aazih]

Hi, I've followed the customize font example and I'm able to modify the font for elements like h1.

I was wondering if it was possible to do the same for just the text in the md-tabs or md-header section of the generated site.

For example this works in an extra.css:

md-typeset h1 {
  color: black;
  font-family: "PlayFair";
  font-size: 80px;
}

But this does not:

.md-typeset md-tabs {
  color: black;
  font-family: "PlayFair";
  font-size: 80px;
}
.md-typeset md-header {
  color: black;
  font-family: "PlayFair";
  font-size: 80px;
}

Really appreciate any help. Trying to use this to make a personal website, not documentation.

[squidfunk]

You're missing a . in the class names and you should not scope it with .md-typeset (that's for the content of the page):

.md-tabs {
  font-family: "PlayFair";
}
.md-header {
  font-family: "PlayFair";
}

We recommend to use the web inspector of your browser to find out which rules need to be changed with CSS. The above rule should at least change the font family. To change font size and colors you might need to use more specific rules. Maybe somebody from the community can share some customizations how to do that ☺️

[Aazih]

Thanks very much @squidfunk

I am able to change font family with this, and color even, but as you said, cannot change size. Hopefully someone has a solution for that. It really helps to differentiate a site by being able to customize the top of the site.

Another observation is that changing the font family in css doesn't seem to integrate with Google Fonts. I was testing with a very obviously different font called Henny Penny and to get it to work I had to follow the following steps

First, enable the privacy plugin (which I should probably do anyway)
Second, set the font of text or code to Henny Penny from mkdocs.yml
This prompts the font to be downloaded
Third, refer to the font from extra.css

[alexvoss]

@Aazih, it would help if you could create a minimal reproduction so we can see what you have tried to do. Have you used the web inspector to find the selectors necessary to change the font size? A reproduction would allow us to see what you have come up with and to spot where the problem lies.

[Aazih]

Thanks much for the tips @alexvoss and @squidfunk

With your advice I went through the process of inspecting every element and with the assistance of
#2933 (comment)

I came up with the following adjustments in extra.css to achieve the effect I was looking for of a large title and logo and a somewhat large and centered navigation tab. Makes it feel a little less techy I think.

The only thing I'm not sure of is if I was able to change the font-family of the title, but it's close enough to what I want to not spend more time on it. I'm not fond of css so I'm hoping that I'm close to down with the basic design and I hope it looks good in different size screens!

/* Header */
.md-header__button.md-logo {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2rem;
  width: 2rem;
}

.md-header__title {
  flex-grow: 1;
  font-size: 2rem;
  height: 3.5rem;
  line-height: 3.5rem;
  font-family: "PlayFair"
}


 /*  Navigation tabs */
.md-tabs__list {
  justify-content: center;
}

.md-tabs__item {
  height: 2.95rem;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.md-tabs__link {
  font-size: 1.25rem;
}

.md-tabs {
  font-family: "PlayFair";
}

[alexvoss]

The web browser's inspector allows you to investigate what font is actually used for an element. You may need to change the size of the right-most panel a bit to see it but next to Layout, Computed, ... you will find Fonts. This is for Firefox but AFAIK Chrome and Safari look very similar.