How to load font face specific for All IPAD devices

Question

How to load font face specific

for All IPAD devices... 1. IPAD this should load only in all IPAD Devices Safari 2.It should load in all OS browsers + IPAD all Devices Safari

CSS:

    1.//*IPAD this should load only in all IPAD Devices Safari
            @font-face {
            font-family:'Calibri';
              src: url('fonts/calibri.eot'); /*IE9 Compat Modes */
              src: url('fonts/calibri.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                 url('fonts/calibri.woff') format('woff'), /*Modern Browsers*/      
                  url('fonts/calibri.ttf') format('truetype'), /*Safari, Android, iOS */
                  url('fonts/calibri.svg#calibri') format('svg') /*Legacy iOS*/
            }
            //*IPAD Devices Safari



           2. // This should load in all OS browsers + IPAD all Devices Safari
            @font-face {
            font-family:'HelveticaNeueLT Std Lt';
            src: url('fonts/HelveticaNeueLTStd-Lt.eot'); /* IE9 Compat Modes */
            src: url('fonts/HelveticaNeueLTStd-Lt.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), /* Modern Browsers */
                 url('fonts/HelveticaNeueLTStd-Lt.ttf')  format('truetype'), /* Safari, Android, iOS */
                 url('fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLT Std Lt') format('svg') /* Legacy iOS */
            }
            // this should load in all OS browsers + IPAD all Devices Safari

you will need javascript or jquery for detecting ipad and adding font — Vitorino fernandes, Nov 16 '14 at 11:25

score 1 · Answer 1 · edited May 23 '17 at 11:49

You should be able to do this by checking the user agent string in the browser used.

Using JavaScript you can read the browsers UA string then check for common strings found in Apple browsers and offer up optional code only for them.

<script type="text/javascript">
$(document).ready(function() {
  //check for iOS
  var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);

  var ipad_only_fonts = "font-family:'Calibri'; url('fonts/calibri.woff') format('woff'), url('fonts/calibri.ttf') format('truetype'), url('fonts/calibri.svg#calibri') format('svg')";
  var all_apple_device_fonts = "font-family:'HelveticaNeueLT Std Lt'; url('fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('fonts/HelveticaNeueLTStd-Lt.ttf') format('truetype'), url('fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLT Std Lt') format('svg')";
  if(is_uiwebview || is_safari_or_uiwebview) {
    // iphone/ipad/ipod detected

    // Add your fonts here
  }
});
</script>

There are various methods for adding CSS to your pages via Javascript but you could implement your requirements with the following excerpt.

<script type="text/javascript">
$(document).ready(function() {
  //check for iOS
  var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit/i.test(navigator.userAgent);

  var is_uiwebview_ipad = /(iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);
  var is_safari_or_uiwebview = /(iPad).*AppleWebKit/i.test(navigator.userAgent);

  if(is_uiwebview_ipad || is_safari_or_uiwebview_ipad) {
    // ipad detected
    $('body').css('@font-face', ipad_only_fonts); 
  }
  if(is_uiwebview || is_safari_or_uiwebview) {
    // iphone/ipod detected
    $('body').css('@font-face', ipad_only_fonts); 
  }
});
</script>

Disclaimer: I havent tested this on actual devices, but it should work!

How to load font face specific for All IPAD devices

1 Answers1