Google Fonts not working on iOS

Hi all!

So I think I successfully changed the fonts on my site to Google Fonts Open Sans Condensed for the text and Amatic SC for the headings. I added the following code (for both fonts) into the beginning of the head (header.php if I’m not mistaken??) as instructed on the Google Fonts site:

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

and added the following code in the CSS plugin:

h1, h2, h3, h4, h5, h6 {
	font-family: "Amatic SC", cursive;
	color: #2f2f2f;
	font-weight: 100;
	clear: both;
}

.menu ul a,
.menu ul a:visited {
	display: block;
	font-size: 21px;
	line-height: 21px;
	font-family: 'Amatic SC', cursive;
	padding: 30px;
	position: relative;
	text-decoration: none;
	color: #2f2f2f;
	text-transform: uppercase;

Total shot in the dark, but it seems to have worked. Except:

The fonts won’t show up on my iPad. I did a quick google search and the new iOS is supposed to recognize Google Fonts, but perhaps I’m doing something wrong when I embed. Help please!

Thanks so much,
Samantha
iciandla.com