I'm completely new to using @font-face and I'm encountering some issues. Despite going through numerous posts and tutorials, I can't seem to get my fonts to load properly. I've tried activating and deactivating the font on the server, but it's not working as expected. Interestingly, the font works in the browser when activated online, but not locally.
My CSS file is located in the fonts folder and everything has been uploaded to the server successfully. The demo file that came with the font works fine, so I know the issue lies with my implementation.
I'm sure I must be overlooking something simple, and I'll probably feel foolish once it's pointed out.
Below is the snippet of my @font-face CSS:
@font-face {
font-family: 'capsuularegular';
src: url('fonts/Capsuula-webfont.eot');
src: url('fonts/Capsuula-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Capsuula-webfont.woff') format('woff'),
url('fonts/Capsuula-webfont.ttf') format('truetype'),
url('fonts/Capsuula-webfont.svg#capsuularegular') format('svg');
font-weight: normal;
font-style: normal;
Here is the page where I'm attempting to implement the font:
Any assistance you can provide would be greatly appreciated.