Proper @fontface set-up for custom fonts

Support
#1

Hi Apex Team,

we are currently updating an older X theme version to the latest versions.
While doing that we prepared a dev-environment and also wanted to make some updates to the used custom fonts on the site. Here we are running into some problems and questions:

  • The old installation is calling @fontface in the custom css area via customizer. Is that still a feasible option or is this not recommended anymore? I read in the forum that you recommend using a child theme…

  • In case using a child theme is the answer, where do I find the child theme’s style.css file in which to place the @fontface statement?

  • Does it matter where I place the font files on the server?

  • Last but not least: when moving the finished website vom dev to the live URL, I have to change the @fontface path accordingly I guess. Anything else to keep in mind? I ask because we had the problem during testing that all worked fine in the dev environment using the dev url (a installation in a subfolder on the same server) but when pointing the live URL to that folder the fonts are not found anymore…

Thanks for your help and best regards

Pro/Cornerstone Using Font Manager with Externally Hosted @font-face resources
#2

Hello There,

Thanks for writing in!

1.) @font-face in the custom css of the customizer, Appearance > Customizer should work just fine. Just make sure that you also have assigned the element where you want to apply this imported font. The global theme settings might override your css. Just keep in mind the order of the styling being applied to the site:

  • Theme’s stack style.css
  • Child Theme’s styles.css
  • WordPress additional Custom css in Appearance > Customizer > Addition CSS
  • Theme Option Settings
  • Theme Option’s custom css

2.) If you want to place the @font-face in the child theme’s style.css, you can edit the file by going to Appearance > Editor. If there is no Appearance > Editor in the menu, it means that your WP installation does not allow file edits within the dashboard. You will have to log in to your ftp and manually download the child theme’s style.css and insert your changes.

3.) No. It does not matter where you place the font files. What matters most is that you have inserted the correct file path in your custom css in the @font-face block.

4.) Yes you will have to make sure that it is using the direct font file path to avoid CORS issue.

Hope this helps.

#3

Thanks for the super fast reply! We will check on your tips and see if we can get the job done!
Will get back to you!

#4

Let us know how it goes!

#5

Worked perfectly after changing the URL to the LIVE URL. Thanks!

#6

Glad to hear that :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.