Okay
  Public Ticket #1959299
Custom @font-face font not showing up in editor
Closed

Comments

  • id-systems started the conversation

    The font we're using is incorporated by a CSS @font-face directive. The final slider on the page looks fine, but in the editor, the font does not appear. Is there a place that I need to include this code or do I have to duplicate the @font-face declarations in the slider?

  • [deleted] replied

    Hello Id-systems,

    Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

    You can add custom Google Fonts in the LayerSlider WP -> Options -> Google Fonts tab. After that, you just have to enter the font names to the Font family field and other styling settings in the Styles tab of the layer.

    Or if you want to use fonts outside of Google Fonts that are not supported out-of-box, you will have to add and load them yourself to your site/installation. After that it's the same method, you can enter the font name to the plugin's settings (Styles tab) and it will pick up the font on the front-end and back-end too.

  • id-systems replied

    Attila —

    Thanks! This is not a google font. So how do we add this to Enfold/WordPress? We've done it in the style sheet declaring the @font-face calls. 

  • [deleted] replied

    If you simply load the fonts to your WP theme - Enfold in your case - that should be enough. The plugin should pick up the fonts after that, if you enter the name to the font family field.

  • id-systems replied

    The fonts are loaded and show up on the rendered site, but not in the editor. There's no option to choose those fonts in the drop down. Looking at the Enfold docs, there's no way to add a custom loaded font from @font-face into the dropdowns.

  • [deleted] replied

    You will not see them in the Google Fonts dropdown in LayerSlider. You cannot load them there.

    What you need to do, is load these fonts to your theme/back-end, and simply enter their name for the text layers in LayerSlider. You can do that in the Layers -> Styles -> Font Family field. 

    If the fonts are properly loaded to the back-end and you enter the proper name to the mentioned field, they should show up in the editor too, regardless that they are not directly loaded to LayerSlider.

  • id-systems replied

    That doesn't work. The fonts have been added, using the CSS @font-face directive as Enfold specifies. Adding the font name in either the Font Name field or custom CSS in LayerSlider has no effect, however it does render correctly on the published version of the slider. I have tried with and without quotes in the Font Family field. 

  • [deleted] replied

    Thank you for the feedback. Unfortunately, in that case it's possible that the LayerSlider editor does not recognize fonts added this way. Google Fonts are supported out-of-the-box and custom fonts added 'normally' should show up too, but it might be the case that this CSS @font-face directive is not recognized in the back-end, only on the live site.