XF 1.3 Best Practice to include / load fonts

[ExpertPixels.com]

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

 

[TPerry]

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.

 

[ExpertPixels.com]

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]

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]

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]

[...]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/

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

 

[TPerry]

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.

<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]

Thank you so much @Tracy Perry .
your help is always highly appreciated!

 

[rafass]

The Fontawesome guys now have this:

Spoiler: Fonticons

http://blog.fonticons.com/
https://fonticons.com/