Using google fonts.

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?

Thanks.
 
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?

Thanks.
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:

Code:
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') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
  })();

Normal API:

Code:
<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:

Code:
font-family: 'PT Sans', sans-serif;
font-family: 'PT Serif', serif;
 
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?

Thanks.
 
Thanks for that guts. 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?

Thanks.
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).
 
Could anymore provide this information in more layman's terms? I'm still not sure how to put this all together.
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.
 
Top Bottom