Install (and use) fonts in XenForo

[Bi0S Emerald Member Posts:12,183 Threads:12,128 Reputation 31]

Add at very very bottom to EXTRA.css template of your style:

Code:

/* <----- start FONTS ------->*/
   @font-face {
       font-family: 'ecliptic';
       src: url('./styles/default/xenforo/fonts/ecliptic.eot');
       src: url('./styles/default/xenforo/fonts/ecliptic.ttf') format("truetype"),
               url('./styles/default/xenforo/fonts/ecliptic.woff') format('woff'),
               url('./styles/default/xenforo/fonts/ecliptic.eot?#iefix') format('embedded-opentype'),
               url('./styles/default/xenforo/fonts/ecliptic.svg#ecliptic') format('svg');
       font-style: normal;
       font-weight: normal;
   }/* <----- END FONTS ------->*/

The path './styles/default/xenforo/fonts/ecliptic.ttf' must correspond to the physical path through which the aforementioned have uploaded at FTP the source file.
Defines CSS for font you want to change and use font-family: 'ecliptic'; in its definition.

You can see an example when you hover place the cursor on any forum main forums list (in addition, has added another effect) in http://www.xenfacil.com/foro/

To put it in the category list Add at very very bottom to EXTRA.css template of your style:

Code:

/* <----- Títulos de nodo ------->*/
.node .nodeTitle{
   font-family: 'ecliptic' !important;
}

.node .unread .nodeTitle{
   font-family: 'ecliptic' !important;
}

.node .nodeDescription{
   font-family: 'ecliptic' !important;
}

.nodeList .categoryStrip .nodeTitle{
   font-family: 'ecliptic' !important;

}

/* <----- Fin de títulos de nodo ------->*/

And save the changes.

would look like

Code:

/* <----- start FONTS ------->*/
   @font-face {
       font-family: 'ecliptic';
       src: url('./styles/default/xenforo/fonts/ecliptic.ttf') format("truetype");
       font-style: normal;
       font-weight: normal;
   }/* <----- END FONTS ------->*/
/* <----- Títulos de nodo ------->*/
.node .nodeTitle{
   font-family: 'ecliptic' !important;
}

.node .unread .nodeTitle{
   font-family: 'ecliptic' !important;
}

.node .nodeDescription{
   font-family: 'ecliptic' !important;
}

.nodeList .categoryStrip .nodeTitle{
   font-family: 'ecliptic' !important;

}
/* <----- Fin de títulos de nodo ------->*/

If you do not have the fonts in all formats mentioned above, there is a free service @font-face Generator which allows conversion to all formats needed for maximum compatibility.

Select the font and this will return a zip file that contains the fonts in the formats required and CSS code necessary to place it in our style sheet.
@font-face CSS property is available from CSS2 that have incorporated modern browsers (Firefox 3.5, Firefox 3.5, Chrome 4.0, Internet Explorer 5, Safari 3.1, Opera 10). In this way we will not be restricted to using the classical sources on our pages and libraries also need use javascript, flash or images to get the same results.

Free fonts in: http://www.fontsquirrel.com/ and http://www.google.com/webfonts#ChoosePlace:select and more

[simoclick DF Member Posts:16 Threads:1 Reputation 0]

thanks for this very useful guide

[Comcast DF Member Posts:31 Threads:3 Reputation 0]

Just installed a few fonts

[Smoulougde DF Member Posts:47 Threads:2 Reputation 0]

Thanks for this tutorial :)