ALERT!
Click here to register with a few steps and explore all our cool stuff we have to offer!
Home
Upgrade
Credits
Help
Search
Awards
Achievements
 9227

Install (and use) fonts in XenForo

by Bi0S - 05-04-2017 - 03:13 AM
#1
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.
[Image: 26359-2adba4e2a6a3818ef876678451d9d08b.jpg]
[Image: 26357-3051c39e6e705121a02213309d780fd5.jpg]
[Image: 26358-4a366ce168fc92f2d8b738879fe085c5.jpg]

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
Reply
#2
thanks for this very useful guide
Reply
#3
Just installed a few fonts
Reply
#4
Thanks for this tutorial :)
Reply

Users browsing: 1 Guest(s)