• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Install fonts in XenForo

XFacil.com

Active member
Add at very very bottom to EXTRA.css template of your style:
PHP:
/* <----- 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:
PHP:
/* <----- 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
PHP:
/* <----- 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 ------->*/

Salud2
 
I tried this once in vB, the problem was it asked Windows users to install the font when they opened the page. Does it ask to do this with this mod?
 
I tried this once in vB, the problem was it asked Windows users to install the font when they opened the page. Does it ask to do this with this mod?
Most modern browsers (With the exception of IE in many cases) support @font-face.
 
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.
51.webp
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.

Salud2
 
I tried this once in vB, the problem was it asked Windows users to install the font when they opened the page. Does it ask to do this with this mod?
@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

Salud2
 
@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

Salud2
Internet Explorer didn't start properly supporting @font-face till IE7 or IE8 iirc.
 
Back
Top Bottom