If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.
May 24, 2012 at 3:38 am #12669
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):
src: url(‘../fonts/zag/zag_bold-webfont.eot?#iefix’) format(’embedded-opentype’),
Then I try to apply it to all h1 tags:
font-family: ZagBoldRegular; /* tried this with and without quotes) */
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.May 27, 2012 at 8:21 am #76321
Can you post a link to your website please? Maybe the fonts don’t load properly because the url/path is wrong. Personally I always add the font folder to the css folder (angular/css) and then you just need to use ” src: url(‘fonts/zag/zag_bold-webfont.eot’); ” in css/custom.css.May 31, 2012 at 2:29 am #76322
Sorry for the delay. I had to get my site live over the last couple days (I was using a maintenance mode plugin while working on it).
I decided to activate a custom font through the theme for the time-being, and turned of my @font-face code, but the font files are located in a folder named “fonts”, one directory outside of the custom.css file. I should add that I had no custom fonts selected when I originally tried to get this to work. I hope this helps.
The link to my site is:
ThanksJune 4, 2012 at 6:33 am #76323
I tried to access eg http://stevemonfils.com/wp-content/themes/angular/fonts/zag/zag_bold-webfont.eot directly but it gives me a 404 error. I’d check if the path is correct, if the file exists and the ftp permission rules for the fonts directory.June 13, 2012 at 4:07 am #76324
This turned out to be a simple permissions issue with my hosting. I had it fixed, retested, and the custom fonts work great!
Thanks for the insight.June 13, 2012 at 5:58 am #76325
The topic ‘@font-face with Angular theme’ is closed to new replies.