Custom CSS font NOT working on mobile

Site URL: https://givetocec.org

Hi everyone! I am currently working on a website for a client. I have run into an issue with custom CSS fonts.

The custom font family that I'm using (Gotham Black, Gotham Bold, Gotham Medium) is working completely fine on desktop, for some reason, it's not showing up on mobile. Instead of displaying any of the Gotham fonts, it displays a serif font. I've tried to trouble shoot by adding !important to the code but that doesn't do anything either.

Any tips or suggestions about how I could fix this? 

For reference, here is the custom CSS I am using. I have also uploaded screenshots for reference of what the fonts look like. 

h1 {
    font-family: 'Gotham-Black';
    font-weight: 700;
    font-style: normal;
    font-size: 72px;
    letter-spacing: 0.0em;
    text-transform: uppercase;
    line-height: .9em;
}

h2 {
    font-family: 'Gotham-Bold';
}

h4 {
    font-family: 'Gotham-Bold';
    text-transform: uppercase;
    font-size: 28px;
}

P {
    font-family: 'Gotham-Medium';
    line-height: .9em;
}
 

Can you provide password?

On 9/20/2024 at 12:27 AM, OstromCreative said:

Site URL: https://givetocec.org

 

Hi everyone! I am currently working on a website for a client. I have run into an issue with custom CSS fonts.

The custom font family that I'm using (Gotham Black, Gotham Bold, Gotham Medium) is working completely fine on desktop, for some reason, it's not showing up on mobile. Instead of displaying any of the Gotham fonts, it displays a serif font. I've tried to trouble shoot by adding !important to the code but that doesn't do anything either.

Any tips or suggestions about how I could fix this? 

For reference, here is the custom CSS I am using. I have also uploaded screenshots for reference of what the fonts look like. 

h1 {
    font-family: 'Gotham-Black';
    font-weight: 700;
    font-style: normal;
    font-size: 72px;
    letter-spacing: 0.0em;
    text-transform: uppercase;
    line-height: .9em;
}

h2 {
    font-family: 'Gotham-Bold';
}

h4 {
    font-family: 'Gotham-Bold';
    text-transform: uppercase;
    font-size: 28px;
}

P {
    font-family: 'Gotham-Medium';
    line-height: .9em;
}
 

Can you try with this code?

h1 {
  font-family: 'Gotham-Black' !important;
  font-weight: 700;
  font-style: normal;
  font-size: 72px;
  letter-spacing: 0.0em;
  text-transform: uppercase;
  line-height: .9em;
}

h2 {
  font-family: 'Gotham-Bold' !important;
}

h4 {
  font-family: 'Gotham-Bold' !important;
  text-transform: uppercase;
  font-size: 28px;
}

P {
  font-family: 'Gotham-Medium' !important;
  line-height: .9em;
}