Hello, the custom font (H1/H2) works on desktop but not mobile... Any ideas what I've done wrong?! 🙂
Would really appreciate any advice!Â
Â
@font-face {
  font-family: 'Apercu';
    src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6e24f87e7ef4c01c85/1593686638677/Apercu+Light.otf');
  font-weight: normal;
  font-style: normal;
 }
@font-face {
  font-family: 'Apercu Bold' ;
   src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/Apercu+Bold.otf') ;
  font-weight: bold;
 font-style: normal;
  }
@font-face {
  font-family: 'Remachine Script';
   src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/RemachineScript.otf') ;
  font-weight: normal;
 font-style: normal;
}
h1 {
 font-family: 'RemachineScript';
}
h2 {
 font-family: 'RemachineScript';
}
h3 {
 font-family:'Apercu';
}
p {
 font-family:'Apercu';
}
.Header-nav-item {
 font-family: Apercu;
 font-size: white;
}
.Mobile-overlay-nav-item { font-family: Apercu;}
form {
color: #000000;
font-family: Apercu Bold !important;
text-align: left;
font-weight: 300;
font-size: 12pt;
 Â
}
.carousel-cell {
 width: 100%;
 height: 200px;
 text-align: center;
 margin-right: 30px;
}
.dropdown p {
font-style: italic; /* answer italic */
}
.answer {
display: none;
margin-top: 4vw; /*space between question and answer */
border-left: #e3e3e3 solid 1px; /*grey line beside answer */
padding-left: 2vw; /*space between line and answer */
}
Custom Font not showing on mobile devices
in Customize with code
Posted
Hello, the custom font (H1/H2) works on desktop but not mobile... Any ideas what I've done wrong?! 🙂
Would really appreciate any advice!Â
Â
@font-face {
  font-family: 'Apercu';
    src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6e24f87e7ef4c01c85/1593686638677/Apercu+Light.otf');
  font-weight: normal;
  font-style: normal;
 }
@font-face {
  font-family: 'Apercu Bold' ;
   src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/Apercu+Bold.otf') ;
  font-weight: bold;
 font-style: normal;
  }
@font-face {
  font-family: 'Remachine Script';
   src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/RemachineScript.otf') ;
  font-weight: normal;
 font-style: normal;
}
h1 {
 font-family: 'RemachineScript';
}
h2 {
 font-family: 'RemachineScript';
}
h3 {
 font-family:'Apercu';
}
p {
 font-family:'Apercu';
}
.Header-nav-item {
 font-family: Apercu;
 font-size: white;
}
.Mobile-overlay-nav-item { font-family: Apercu;}
form {
color: #000000;
font-family: Apercu Bold !important;
text-align: left;
font-weight: 300;
font-size: 12pt;
 Â
}
.carousel-cell {
 width: 100%;
 height: 200px;
 text-align: center;
 margin-right: 30px;
}
/* Dropdown Box */
.dropdown {
margin-bottom: 3vw; /*spacing between boxes */
}
.dropdown h1{
font-size: 1.3rem; /*question font size */
background: #000000; /*box background colour */
color: #FFFFFF !important; /*question text colour*/
padding: 10px;
}
.dropdown p {
font-style: italic; /* answer italic */
}
.answer {
display: none;
margin-top: 4vw; /*space between question and answer */
border-left: #e3e3e3 solid 1px; /*grey line beside answer */
padding-left: 2vw; /*space between line and answer */
}
.dropdown h1:after{
content: "\2193"; /* arrow */
text-align:right;
float: right;
}