• 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

ExpertPixels.com

Well-known member
#1
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:

Code:
@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
 

ExpertPixels.com

Well-known member
#3
Are you specifically referring to FA, or fonts in general?
A resource that is here for serving Google fonts locally is at http://xenforo.com/community/resources/serve-google-fonts-locally.1860.
The same basics should apply for FA.

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
 

Chris D

XenForo developer
Staff member
#4
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:
http://xenforo.com/community/resources/font-awesome-local-install.3262/

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:

http://xenforo.com/community/threads/include-font-awesome-by-default.75276/
 

ExpertPixels.com

Well-known member
#5
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
 

rafass

Well-known member
#6
[...]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:
http://xenforo.com/community/resources/font-awesome-local-install.3262/

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

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:
http://xenforo.com/community/threads/include-font-awesome-by-default.75276/
Voted +10000
 

Tracy Perry

Well-known member
#7
Hey Chris, that resource has been deleted. do you know another way to install FA locally?
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.
Code:
<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