E-Dub
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
Demo URL
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 */
}
I'm seeing the font correctly. Is this not what you meant to see?
domaine.png
domaine.png
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
Screen-Shot-2017-05-02-at-2.04.44-PM.png
Which browser? Maybe you need to do an hard refresh
Font is appearing correctly to me.
Font is appearing correctly to me.
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
https://s3.amazonaws.com/collab-dev-test/DomaineTextWeb-Regular.eot
ASKER
Yep, when I clicked the URL you listed, it prompts me to download the file. Is that was should happen?
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
i.e. http://www.n2n.erikagordon.com/assets/fonts/DomainTextWeb-Regular.ttf