Docs

[AndyDaupert]

Greetings. I am attempting to customize my typography with the standard CSS code. The body font is set in customizer to Roboto, and the headings font is Fredericka The Great (a Google font). I want H5 to be Abril Fatface, so I have added this to CSS:
h1, .h1 {
font-size: 40px;
}
h2, .h2 {
font-size: 30px;
}
h3, .h3 {
font-size: 24px;
}
h4, .h4 {
font-size: 18px;
}
h5, .h5 {
font-family: Abril Fatface;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 16.4px;
}
h6, .h6 {
font-size: 14px;
}

However, when adding H5 to any text on the site, it is getting overwritten. I am checking with WhatFont, it shows Abril Fatface struck out and “serif” in it’s place.

Any help?

[Joao]

Hi There,

Please try :

font-family: "Abril Fatface";

Hope it helps

Joao

[AndyDaupert]

I’m afraid that did not help. I am attaching a screenshot showing WhatFont results

[Joao]

Hi There,

In that case add the following code:

h5, .h5 {
  font-family: "Abril Fatface";
}
/* latin-ext */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDn1PgMwFt2V-WJ2uOZ4WXLU.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Abril Fatface';
  font-style: normal;
  font-weight: 400;
  src: local('Abril Fatface'), local('AbrilFatface-Regular'), url(https://fonts.gstatic.com/s/abrilfatface/v8/X1g_KwGeBV3ajZIXQ9VnDjxObtw73-qQgbr7Be51v5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

I tested on my end and it works,

Let us know if you need help with anything else.

Joao

[Author]

Posts