Adding Custom Fonts – won't work on all devices

Hi,

I’ve been reading some threads about adding custom fonts to the Enfold theme. My custom font works perfectly on my computer on different browsers (Safari, Chrome) and on another two devices. The problem is that when trying to visualize the website from Ipad, other computers and tables, the font wont appear.

This is what I place on my enfold-child .css:

@font-face {
font-family: ‘ClearSans-Light’;
src: url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.eot’); /* IE9 Compat Modes */
src: url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.eot?#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘http://mywebsite/wp-content/themes/enfold/css/fonts/ClearSans-Light.svg#ClearSans-Light’) format(‘svg’); /* Legacy iOS */
}

h1, h2, h3, h4, h5, h6 {
font-family: ‘ClearSans-Light’, sans-serif !important;
text-transform: uppercase;
}

body {
font-family: ‘ClearSans-Light’, sans-serif !important;
}

I tried deleting the cache, changing the fonts files to another folder in the server and still cannot get the font to display everywhere the same.
I don’t get what I am doing wrong, but I am also no expert after all ;).
Thank you in advance for your help!.