Font Family Works On All Pages EXCEPT Home & Blog When Viewed On Mobile

Hello,

I used Simple Custom CSS plugin to change my H1-H6 font family (details below) as my theme was not customisable. I works perfectly on my desktop but on my mobile devices, ON THE HOMEPAGE AND BLOG PAGE ONLY, the headings appear in Times New Roman and not Dolce Vita Light. My site is https://www.whiteballoonfilms.co.uk

My confusion is because Dolce Vita Light DOES appear correctly on my other pages in the H1-H6 headings so the mobile devices do support this font. It is only the homepage and blog page where I have this problem. To confuse me further, I am testing on 2 different iPhones, the first of which shows the headings in all caps, and the second of which shows small caps.

I have tried to diagnose the problem with Chrome Inspector but using the H1 as an example, it seems to be the same on all pages (which would explain why it works perfectly on the desktop).

I would be hugely grateful for any help.

New CSS added to Simple Custom CSS:

h1, h2, h3, h4, h5, h6 {
	font-family: 'Dolce Vita Light', 'Calibri', 'Times New Roman', cursive;
	font-weight: normal;
	text-align: center;
}

h1 {
	font-size: 45px;
	line-height: 60px;
	color: #837e7c;
	margin: 0 0 15px 0;
  	text-shadow: 2px 2px 3px #b6b6b4;
}

Original CSS:

/*
HEADLINES
*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'Sue Ellen Francisco', 'Calibri', 'Times New Roman', cursive;
	font-weight: normal;
	text-align: center;
}

h1 {
	font-size: 48px;
	line-height: 60px;
	text-transform: uppercase;
	margin: 0 0 15px 0;
}