Imported fonts not working in Safari

  • Profile Image
    KILLSPENCERINC1
    Asked on October 18, 2017 at 02:23 AM

    Hello, having some issues with the font not working in Safari. I am importing two fonts stored on Shopify:

    @font-face {

    font-family : Avenir;

    src : url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.woff')

    format('eot'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.eot')

    format('woff'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.woff')

    format('ttf'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.ttf');

    }

    @font-face {

    font-family : United;

    src : url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.woff')

    format('eot'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.eot')

    format('woff'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.woff')

    format('ttf'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.ttf');

    }

    How can I get this to also work for Safari?



    This is a re-post of a comment on How to Use Google Fonts and Custom Fonts in your Form

  • Profile Image
    Jim_R
    Answered on October 18, 2017 at 06:01 AM

    Can you try replacing them with the following:

    @font-face {

      font-family: 'Avenir';

      src: url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.eot');

      src: url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.eot?#iefix') format('embedded-opentype'), 

           url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.woff') format('woff'), 

           url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.ttf') format('truetype');

    }

    @font-face {

      font-family: 'United';

      src: url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.eot'); 

      src: url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.eot?#iefix') format('embedded-opentype'), 

           url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.woff') format('woff'), 

           url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.ttf')  format('truetype');

    }

    This format was taken from the Deepest Possible Browser Support section of this page https://css-tricks.com/snippets/css/using-font-face/ 

    Please give that a try and if it fails, share with us the ID/URL of the form you're currently working on. If it's embedded on a page on your website, please share the page URL instead.

  • Profile Image
    KILLSPENCERINC1
    Answered on October 18, 2017 at 12:07 PM

    Hey Jim, 

    Thanks for your reply. I tried the code provided above, but unfortunately Safari still is not picking up the custom fonts.  We have several forms on the site, but right now I am specifically working on the contact form:

    https://killspencer-dev.myshopify.com/pages/contact-killspencer

  • Profile Image
    Marvih
    Answered on October 18, 2017 at 02:04 PM

    Try replacing the semi-colon on the first line of src with comma.

    1508349877219.png