Custom font on PC vs. mobile

Yunabuna

I'm currently using a custom font from a separate web host of mine for my headers. See link below for example. The font works perfectly fine for me on PC, however it does not show on mobile. I only have two file types available--.otf and .ttf. Is it possible to have this font show on mobile? And if not, how can I set up a separate backup font (face and size) to be used for mobile devices in its place?

Appreciate any help I can get! Thanks!

https://www.chloemorenaphotography.com/About

Hikin' Mike

Your font isn't displayed at all:

Your font link doesn't work for starters.

Hikin' Mike

The reason you see it on your desktop is you probably have that font loaded there.

Yunabuna

Got it, just noticed this now checking on another computer.

Hikin' Mike

Also your @font-face stack is wrong. You need to read my "Adding non-Google Fonts" tutorial: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts

@font-face {
  font-family: 'Brillyo';
  src: 
       url(http://chlmor6.dreamhosters.com/brillyo-Regular.ttf);
       url(http://chlmor6.dreamhosters.com/brillyo-Regular.otf);
}

Yunabuna

Thanks! For now I've corrected it to this. (I need permission to generate other font types on Font Squirrel.) It still doesn't seem to work. Not sure what I'm doing wrong.

@font-face {
    font-family: 'Brillyo';
    src: url('http://chlmor6.dreamhosters.com/fonts/brillyo-Regular.ttf') format('truetype'),
         url('http://chlmor6.dreamhosters.com/fonts/brillyo-Regular.otf') format('opentype');
}

Hikin' Mike

You need to generate a font stack using Font Squirrel or similar like I mentioned in my tutorial above.

Yunabuna

I've generated the font stack using Font squirrel and replaced the old code, but the font still appears to be unaffected.

Hikin' Mike

@Yunabuna said:
I've generated the font stack using Font squirrel and replaced the old code, but the font still appears to be unaffected.

I took your font and created a font stack using Font Squirrel and loaded it to my site and it works. So using one of the web tools, I copied my @font-face in place of your and it worked fine. I then copied your font stack to my testing page and it didn't display. There must be a problem when you created your font stack. I can't upload it here, but if you PM me with an e-mail, I'll send it to you as a zip file.

Yunabuna

Cool, thanks so much! PMing you now.