Tagged: @font-face, web fonts, webfonts
-
AuthorPosts
-
October 23, 2014 at 6:12 pm #340274
Hi,
We’ve been using Enfold for the past 4 or so months with absolutely no issues until recently. We have loaded a custom font (non-web font) to be used within LayerSlider. I added the following code to custom.css:
@font-face { font-family:’Lust’; src: url(‘wp-includes/fonts/2B62CD_1_0.ttf’) format(‘truetype’), url(‘wp-includes/fonts/2B62CD_1_0.woff’) format(‘woff’), url(‘wp-includes/fonts/2B62CD_1_0.eot’) format(‘embedded-opentype’), url(‘wp-includes/fonts/2B62CD_0_0.ttf’) format(‘truetype’) font-style: italic, oblique, url(‘wp-includes/fonts/2B62CD_0_0.woff’) format(‘woff’) font-style: italic, oblique, url(‘wp-includes/fonts/2B62CD_0_0.eot’) format(‘embedded-opentype’)font-style: italic, oblique,; }
}
Font is still uploaded in all those formats in FTP server.
Within LayerSlider we would call “Lust” (w/o quotes) in the Font section under styles.This has worked perfectly for the past few months and it still works on my personal computers, but I believe that is because I have the font also installed in my font book on OS X. I recall when we first started working on the site that I verified the font by loading it on multiple Windows machines running both Chrome and IE – neither of which had the font installed.
This issue was pointed out by the client that the font is no longer loading, and when I check on mobile (iPhone 6 running 8.1 using Safari) the font doesn’t load.
We were running WP 3.9.2 and an older theme version – since this issue has came up, I have updated everything to the newest versions and the font still is not loading.
I’ve created login information for you in the private section to look into this.
These are direct links to the original font:
http://lust.positype.com/Lust/
http://www.myfonts.com/fonts/positype/lust/Thanks.
- This topic was modified 10 years, 2 months ago by jdygas.
October 24, 2014 at 8:37 am #340500Hi jdygas!
Thank you for using Enfold.
Why is it located on the wp-includes folder? Please try to use the absolute url or directory name of the fonts. Something like:
http://www.mysite.com/wp-content/uploads/fonts/lust.ttf
Best regards,
IsmaelOctober 24, 2014 at 11:09 pm #340820I can move those and give that a shot – but if I am not mistaken…why would that matter as long as its located within the same main folder in the FTP?
I will let you know as I make the changes…
October 27, 2014 at 12:40 am #341210Hi!
Yes, it will work if custom.css is also located on the wp-includes folder but it’s not. You need to use the absolute url or transfer the font files on a different directory.
Cheers!
IsmaelOctober 28, 2014 at 3:55 pm #342275I’m having similar problems with an outside webfont using @font-face. I’ve tried both absolute and relative URLs, but just can’t get the font to load properly. I’ve done this on another WordPress installation with a different theme, but I can’t get it to work with the Enfold child theme I have set up.
Any insight as to how to use an outside webfont? I’m happy to move the files to a specific folder or update the CSS file.
October 30, 2014 at 2:14 pm #343405Hi!
Can you please give us a link to the website? A lot of Enfold users are using the @font-face code on custom.css file or Quick CSS field for their custom fonts. Please post your code on pastebin.com. Try to place the font files on wp-content folder then use absolute url. Make sure that the directories have the correct file permissions.
Cheers!
IsmaelOctober 30, 2014 at 6:13 pm #343515Ok, so I actually got it to work with a relative URL, as long as the files are — as you advise — in the wp-content folder, rather than within the themes/enfold-child/css/ folder, as it was just prior.
I’ve added this to styles.css in my child theme, rather than custom.css or quick.css. I suppose it doesn’t matter, but is one preferable to the other?
Here’s the code, which I suppose is FYI at this point:
@font-face { font-family: 'VerbCond Light Italic'; src: url(/wp-content/webfonts/verbcond-light-italic.eot); src: url(/wp-content/webfonts/verbcond-light-italic.eot?#iefix) format('embedded-opentype'), url(/wp-content/webfonts/verbcond-light-italic.woff) format('woff'), url(/wp-content/webfonts/verbcond-light-italic.ttf) format('truetype'), url(/wp-content/webfonts/verbcond-light-italic.svg#ywftsvg) format('svg'); font-weight: normal; font-style: normal; }
November 1, 2014 at 3:48 pm #344595Hey!
style.css in child theme is totally fine. Glad you did it.
If you have any other questions please let us know. We are happy to assist you.Cheers!
AndyNovember 1, 2014 at 5:57 pm #344656Thanks for your help. This issue is solved for now.
-
AuthorPosts
- The topic ‘Custom font no longer loading (using @font-face)’ is closed to new replies.