1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.3 Best Practice to include / load fonts

Discussion in 'Styling and Customization Questions' started by ExpertPixels.com, Jun 2, 2014.

  1. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    Hey all,

    Using 3rd party includes such as font-awesome etc etc.. what's the best method to include these within a XF Style ?? This is for upcoming commercial designs and not just of a personal project.

    For example to load font-awesome fonts locally it's default url reference is this:

    @font-face {
      font-family: 'FontAwesome';
      src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
    Sorry if this has been addressed already, I am resuming for another long spell (Yes another one, i am sorry for that).

    Regards, Darren
  2. Tracy Perry

    Tracy Perry Well-Known Member

    rafass likes this.
  3. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    Thanks for replying..

    I will be providing XF Styles both free & premium versions shortly and am wondering how / where i should store theses fonts.. So say font-awesome for example.. As i posted above it's looking for the files like this:

    src: url('../fonts/fontawesome-webfont.eot?v=4.1.0')

    I am just wondering if serving them locally rather than a CDN (I will do this also as a backup method) but for now id like to include within the styles folder so i am wondering the best method to call upon this within a XF Template.

    Thanks for your super fast reply.

    Regards, Darren
  4. Chris D

    Chris D XenForo Developer Staff Member

    Most style developers are currently serving Font Awesome from the Font Awesome CDN. I recommend doing the same.

    People may decide they want to serve it locally, in which case they could do so off their own back by following the instructions here:

    I have suggested that XenForo include Font Awesome by default which would cover a configurable option to serve Font Awesome either by the CDN or locally included with the XF files. You can like my first post here to show your support for that:

    rafass likes this.
  5. ExpertPixels.com

    ExpertPixels.com Well-Known Member

    Thanks for your assistance :)

    I had intended on doing that also but just like to play it safe when releasing work publicly and was hoping to use the CDN as a fall back method.

    Thanks for quick / detailed assistance.

    Regards, Darren
  6. rafass

    rafass Well-Known Member

    Hey Chris, that resource has been deleted. do you know another way to install FA locally?

    Voted +10000
  7. Tracy Perry

    Tracy Perry Well-Known Member

    Just got to http://fortawesome.github.io/Font-Awesome/, download the font from the main Download button on that page.
    Then extract the archive, copy the fonts directory to your root of the web server.
    Then take the contents in the /css directory for the font-awesome.css and place it in a new template via your ACP (I just called my fontawesome.css).
    Then, in your EXTRA.css do a simple include of that new template at the top of EXTRA.css.
    <xen:include template="fontawesome.css" />
    You should then have locally served FontAwesome available.

    You may have to (in the new CSS template you made) change the ../fonts/fontawesome-webfont to reflect just fonts/fontawesome-webfont
    rafass and Chris D like this.
  8. rafass

    rafass Well-Known Member

    Thank you so much @Tracy Perry .
    your help is always highly appreciated! (y)
  9. rafass

    rafass Well-Known Member

Share This Page