Google Font looks different on iPhone browser

Hi,

I’ve created a Child theme of twenty twelve, in which I’m using the Google font Special Elite https://www.google.com/fonts/specimen/Special+Elite
I’ve added it in the css like so:

* {
font-family: ‘Special Elite’, cursive;
}

Now this works great on all my pages, but when I view the site on my iPhone, the font looks totally different.

Example: https://bunchonabreakout.com/wordpress/?page_id=24
Font looks good in Safari, Chrome and Firefox, but not on the mobile version of Safari.

I’m fairly new to CSS and WordPress, please let me know what I’m doing wrong.