Hello,
I'm making modifications to the Angular theme I recently purchased, and I've hit a roadblock when trying to use @font-face.
I have 3 main fonts I want to use for different elements throughout the site. Currently, I have the font kits in a folder I added to the Angular theme content (I originally had them on my root and tried globally linking them. This was unsuccessful as well).
Here's my markup for one of the fonts (would post all 3, but I'm using the same syntax for all of them):
@font-face {
font-family: 'ZagBoldRegular';
src: url('../fonts/zag/zag_bold-webfont.eot');
src: url('../fonts/zag/zag_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/zag/zag_bold-webfont.woff') format('woff'),
url('../fonts/zag/zag_bold-webfont.ttf') format('truetype'),
url('../fonts/zag/zag_bold-webfont.svg#ZagBoldRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Then I try to apply it to all h1 tags:
h1 {
font-family: ZagBoldRegular; /* tried this with and without quotes) */
font-weight: normal;
}
But unfortunately, this has no effect. I read a couple other threads where this was happening, but they were for different themes. I tried a couple solutions and had no luck.
Do you have any idea how I might be able to fix this? Thanks in advance for your help.














