j1419
August 24, 2021, 3:46am
1
Custom font added doesn’t display on mobile view, only desktop. Both “woff2” and “woff” files are uploaded to the Asset folder. The font family that is being displayed on mobile is font-family: var(–font-stack-header);
The following code was added to the theme.css file
@font-face {
font-family: "GothamBold";
src:
url("GothamBold.woff2") format("woff2"),
url("GothamBold.woff") format("woff");
}
.h1, h1, .h2, h2, .h3, h3, .h4, h4 { font-family: "GothamBold"!important; }
@media only screen and (max-width: 749px) {
.h1, h1, .h2, h2, .h3, h3, .h4, h4, {font-family: "GothamBold" !important;
}
}
HI @j1419 ,
As I can see the code, you have applied Gothambold for desktop.
Isn’t it ??
updateyour code with this >
try it
and let me know!
@font-face {
font-family: "GothamBold";
src:
url("GothamBold.woff2") format("woff2"),
url("GothamBold.woff") format("woff");
}
@media only screen and (max-width: 749px) {
.h1, h1, .h2, h2, .h3, h3, .h4, h4, {font-family: "GothamBold" !important;
}
}
Hello There,
You replace my code with your code.
@font-face {
font-family: "GothamBold";
src: url('GothamBold.woff2') format('woff2'),
url('GothamBold.woff') format('woff');
}
@media only screen and (max-width: 749px){
.h1, h1, .h2, h2, .h3, h3, .h4, h4, body {
font-family: "GothamBold" !important;
}
}
j1419
August 24, 2021, 5:09am
4
@oscprofessional The font shows on desktop. Still not showing up on Mobile view
@font-face {
font-family: "GothamBold";
src:
url("GothamBold.woff2") format("woff2");
url("GothamBold.woff") format("woff");
}
@media only screen and (max-width: 749px) {
.h1, h1, .h2, h2, .h3, h3, .h4, h4, {font-family: "GothamBold" !important;
}
}
Now update it again
j1419
August 24, 2021, 5:14am
6
Hello @ZestardTech ,
Your code displays the font on desktop, but not on mobile.
Hello There,
Please share your store URL.
So that I will check and let you know the exact solution here.
j1419
August 24, 2021, 5:18am
8
@oscprofessional the code changed the font to a “Times New Roman” style font and is not the custom font
format should be like this
@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}
refer this link
https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme
j1419
August 24, 2021, 5:44pm
12
@oscprofessional Although it says GothamBold in the inspect element tool, the font that shows on mobile is not the right one.
Desktop View: Displays correct font for .h2 and .h3 VS Mobile View: Not the correct font
j1419
August 30, 2021, 10:47pm
13
@ZestardTech and @oscprofessional
Any ideas why the text is not transferring on mobile
