1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Using google fonts.

Discussion in 'Styling and Customization Questions' started by Dynamic, Mar 13, 2012.

  1. Dynamic

    Dynamic Well-Known Member

    Hi there,

    My wordpress theme uses fonts pulled from google. I am just wondering how I would go about doing this in xenforo. I need to somehow tell it where to download the font from, and then edit the styling options.

    Any ideas?

  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Forsaken

    Forsaken Well-Known Member

    You should be able to just use the javascript to use their API, and then input the font in whichever style property (Or declaration) you need to use.

    Example for WebFont loader:

    WebFontConfig = {
    google: { families: [ 'PT+Sans:400,700,400italic,700italic:latin', 'PT+Serif:400,700,400italic,700italic:latin' ] }
    (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
    Normal API:

    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    You would then just use this CSS in the style property or declaration:

    font-family: 'PT Sans', sans-serif;
    font-family: 'PT Serif', serif;
    Bram, smimosmile and Shelley like this.
  4. Dynamic

    Dynamic Well-Known Member

    Thanks for that guys. So I just add the webfont loader to a .js file and include it in Page_content as well as the normal API in the head tags?

    Than I just change the fonts in style properties?

  5. Forsaken

    Forsaken Well-Known Member

    No, you just include their provided in page_container_js or page_container (Doesn't really matter which).

    Then you just put the font name in the style property or declaration, but make sure to have a fallback (I just add the font to the beginning of the default stack).
    8thos likes this.
  6. Dynamic

    Dynamic Well-Known Member


    Thanks very much :D
  7. MattRock

    MattRock Member

    Could anymore provide this information in more layman's terms? I'm still not sure how to put this all together.
    Bram likes this.
  8. Forsaken

    Forsaken Well-Known Member

    Basically, just choose which fonts you want from Google WebFonts and include them as part of your font collection.

    It'll then give you the code that you'll need to include in your page_container_js_head template as well as the CSS code you use either in the Style properties, or CSS templates.
    Sheldon, 8thos and Shelley like this.
  9. MattRock

    MattRock Member

    Got it! Thanks so much!

Share This Page