Site URL: https://www.zakkiyyashah.com
When page loads, custom css fonts revert momentarily to default style fonts (in a matter of a few seconds). How can I stop this from happening?
My custom fonts have been loading on each page smoothly for over a year. Just today it has done this weird thing where it changes to the default font/theme fonts when loading the page. All pages has this issue when loading at the moment. I have read that Ajax can interfere but I have 7.1 ver so I'm really confused. Would really like to get this sorted asap.
my code is:
//fonts//
@font-face {
font-family: 'ogg';
src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2a303290b040699e02e/1646310051356/Ogg-Roman.otf'); }
@font-face {
font-family: 'oggitalic';
src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b29df404b018eb31d8cf/1646310046211/Ogg-Italic.otf'); }
@font-face {
font-family: 'WorkSansMed';
src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2d4f5d2e0199bf75a0c/1646310101321/WorkSans-Medium.ttf'); }
@font-face {
font-family: 'WorkSansReg';
src: url('https://static1.squarespace.com/static/5ed5f115fa50e214d0d8bfe8/t/6220b2b6e10a9c7d1c9cc00c/1646310071195/WorkSans-Regular.ttf'); }
//Font for header h1//
h1 {font-family: 'ogg'!important;
font-size: 100px;
color: black;}
//Font for header h2//
h2 {font-family: 'ogg'!important;
font-size: 40px;
color: black;}
//Font for header h3//
h3 {font-family: 'oggitalic'!important;
font-size: 18px;
line-height: 1em;
color: black;}
//header 4//
h4 {font-family: 'WorkSansMed'!important;
letter-spacing: .2em;
font-size: 17px;
color: black;}
//paragraph styles//
p {
font-family: 'WorkSansReg'!important;
font-size: 20px;
line-height: 1.7em;
}
p2{
font-size: 10px ;
font-family: 'WorkSansReg';
line-height: 1.7em ;
}
p3 {
font-size: 15px;
line-height: 1.7em ;
}
