Link to home
Start Free TrialLog in
Avatar of E-Dub
E-DubFlag for United States of America

asked on

Loading Self-Hosted Fonts

I'm having trouble loading self-hosted fonts. I set everything up correctly in my CSS file but for some reason, the correct font is not showing. Instead it's displaying another type of Serif font and the weird thing is, I purposely didn't list any fallback fonts.  The font I am trying to load is "DomainText" and should be loaded for the "Welcome" title. Can anyone help me figure out what's wrong?

Demo URL
Avatar of James Bilous
James Bilous
Flag of United States of America image

The urls you have listed in style.css for @font-face cannot be found

i.e. http://www.n2n.erikagordon.com/assets/fonts/DomainTextWeb-Regular.ttf
Avatar of E-Dub

ASKER

So the web font package that was purchased did not come with a ttf extension. Is that needed? I updated all the other urls and it's still not working correctly. Any other suggestions?
ASKER CERTIFIED SOLUTION
Avatar of James Bilous
James Bilous
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of E-Dub

ASKER

I purchased the font form here. It didn't come with the ttf extension, is that needed? I also updated the urls and now when I enter any of them in the browser, it will prompt to download, however it still isn't showing the appropriate font on the webpage.

@font-face {
  font-family: "DomainText";
  src: url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-Regular.eot'); /* IE9 Compat Modes */
  src: url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-Regular.woff') format('woff'), /* Pretty Modern Browsers */
}
@font-face {
  font-family: 'DomainTextItalic';
  src: url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-RegularItalic.eot'); /* IE9 Compat Modes */
  src: url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-RegularItalic.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-RegularItalic.woff') format('woff'), /* Pretty Modern Browsers */
}

Open in new window

I'm seeing the font correctly. Is this not what you meant to see?
domaine.png
Avatar of E-Dub

ASKER

Nope :(  That's showing a different font as well.  Attached is how the font should look.
Screen-Shot-2017-05-02-at-2.04.44-PM.png
Avatar of Nicholas
Nicholas

Which browser? Maybe you need to do an hard refresh

Font is appearing correctly to me.
Avatar of E-Dub

ASKER

I've tried Chrome and Firefox and have done hard refreshes on them. I also just tried on Safari for the first time and it's also showing the wrong font. Argh, this sucks. :(
Can you access the font directly in the browser e.g.

https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-Regular.eot
Avatar of E-Dub

ASKER

Yep, when I clicked the URL you listed, it prompts me to download the file. Is that was should happen?
Avatar of E-Dub

ASKER

It looks like it's working now. I don't know what changed but I'm happy. Thanks!
It could have been a caching issue on your local machine - might have taken awhile for things to become invalidated