1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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

Discussion in 'Tips and Guides [Archive]' started by XFacil.com, Nov 19, 2011.

  1. XFacil.com

    XFacil.com Active Member

    Add at very very bottom to EXTRA.css template of your style:
    PHP:
    /* <----- start FONTS ------->*/
        
    @font-face {
            
    font-family'ecliptic';
            
    srcurl('./styles/default/xenforo/fonts/ecliptic.eot');
            
    srcurl('./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-stylenormal;
            
    font-weightnormal;
        }
    /* <----- 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';
            
    srcurl('./styles/default/xenforo/fonts/ecliptic.ttf'format("truetype");
            
    font-stylenormal;
            
    font-weightnormal;
        }
    /* <----- 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
     
    AC_Khanh01, Klaudius and CyclingTribe like this.
  2. XFacil.com

    XFacil.com Active Member

  3. dutchbb

    dutchbb Well-Known Member

    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?
     
  4. Forsaken

    Forsaken Well-Known Member

    Most modern browsers (With the exception of IE in many cases) support @font-face.
     
  5. XFacil.com

    XFacil.com Active Member

    That's right.

    Salud2
     
  6. XFacil.com

    XFacil.com Active Member

    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.png
    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
     
  7. XFacil.com

    XFacil.com Active Member

    @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
     
  8. Forsaken

    Forsaken Well-Known Member

    Internet Explorer didn't start properly supporting @font-face till IE7 or IE8 iirc.
     
  9. lms

    lms Well-Known Member

Share This Page