Jump to content

Custom Fonts on Mobile

Recommended Posts

Site URL: http://www.sovereignsurf.com

Hi There, 

 

I'm trying to get my custom fonts to show up on mobile. I've read through these forums and added bits of pieces of everyone's code, but i'm having some trouble finding a solution! I've only designated the custom fonts for a few headers and paragraph fonts. Ideally, H1-H3 should be TAN-NIMBUS, all paragraphs + h4  should be Regards. 

 

h1 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */

  }


h2 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');/* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */


  }

h3 {font-family: 'TAN-NIMBUS';}

@font-face {

    font-family: 'TAN-NIMBUS';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('TAN-NIMBUS.woff2') format('woff2'), /* Super Modern Browsers */
       url('TAN-NIMBUS.woff') format('woff'), /* Pretty Modern Browsers */
       url('TAN-NIMBUS.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('TAN-NIMBUS.svg#svgTAN-NIMBUS') format('svg'); /* Legacy iOS */


  }
h4 {font-family: 'Regards';}

@font-face {

    font-family: 'Regards';

       src: url('FontURLhttps://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');

  }

p1 {font-family: 'Regards';}

Link to comment
  • Replies 1
  • Views 579
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Your code is invalid. Use this new code

@font-face {
    font-family: 'TAN-NIMBUS';
       src: url('https://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  }
h1, h2, h3 {font-family: 'TAN-NIMBUS';}

@font-face {
    font-family: 'Regards';
    src: url('https://static1.squarespace.com/static/62810b9d4812f85fc8714315/t/628117600b44e368c8b4e3c3/1652627297937/Regards.otf');
  }
h4, p.sqsrte-large {font-family: 'Regards';}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.