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

Serve Google fonts locally

Allows you to serve the Google fonts from your own server

  1. Tracy Perry

    Tracy Perry Well-Known Member

    Tracy Perry submitted a new resource:

    Serve Google fonts locally - Allows you to serve the Google fonts from your own server

    Read more about this resource...
     
  2. Tracy Perry

    Tracy Perry Well-Known Member

    Tracy Perry updated Serve Google fonts locally with a new update entry:

    Browser cache the fonts for NGINX

    Read the rest of this update entry...
     
  3. Tracy Perry

    Tracy Perry Well-Known Member

    I had a request to add a resource for using the fonts from Google directly. It's pretty much self-explanatory so really didn't see any need for an additional resource. I use TMS to make my edits.
    In TMS, edit the template Page_Container and in the <head> section add (depending on what font(s) you want)
    Code:
    <link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>
    , with each font def on an individual line.

    Then, in your EXTRA.css you can call it by
    Code:
    font-family: 'Sancreek', sans-serif;
    font-family: 'Sancreek', serif;
    , or just use 'Sancreek',sans-serif in your Style Properties definitions.

    A detailed discussion can be found at http://xenforo.com/community/threads/using-google-fonts.29170/
     
    3rd AnGle, Bram and MattW like this.
  4. MattW

    MattW Well-Known Member

    This is exactly how I was doing it before hosting them locally.
     
  5. Anthony Parsons

    Anthony Parsons Well-Known Member

    If using a single google font, is it worth loading them locally versus the one time single call of a visitor to load it onto their machine? Asking because I want to use a single google font to restructure my forum home list...
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    For me it is. That's pretty much what I do now - only use one of them and it reduces the delay of the call to a remote site.
     
    Anthony Parsons likes this.
  7. Anthony Parsons

    Anthony Parsons Well-Known Member

    Agreed... I do prefer the least issue possible and I do hate relying on third parties.

    So if I did this method, then my website would load the font regardless of the person having the font on their computer? Basically, their computer loads the font from my server? Does it do this per page load, or once and is cached by their browser?

    How would I do this on a centos6 server? I have my own dedicated server, yet I only know enough to be dangerous when it comes to linux, thus it is all managed by ServInt.
     
  8. MattW

    MattW Well-Known Member

    Yes, it loads it once, and they it's stored by the browser (from what I can see in Chrome anyway).

    Server OS doesn't matter with this. You just need to FTP the fonts to your server, and set the CSS as mentioned in the guide.
     
    Anthony Parsons and Tracy Perry like this.
  9. Tracy Perry

    Tracy Perry Well-Known Member

    I am pretty sure they are cached by the browser.
    The instructions for installation should apply to a centOS install also (it's not dependent on the OS) as all you are doing is creating a directory under your forum root, installing the fonts you have made into there and then editing the EXTRA.css to reflect the font info.
     
    Anthony Parsons likes this.
  10. Anthony Parsons

    Anthony Parsons Well-Known Member

    You run Centos6 from reading, so there is nothing for me to modify on my server, instead I just jump to downloading the fonts, uploading them to my server and deliver... does Centos6 already cover Google Fonts by default?
     
  11. Tracy Perry

    Tracy Perry Well-Known Member

    It's not the OS that handles the serving of the fonts, but the web server (Apache2, nginx, or LiteSpeed<sp>).
     
    MattW likes this.
  12. Anthony Parsons

    Anthony Parsons Well-Known Member

    Ok... so I have to modify the apache.conf file??? Instead of nginx.conf?

    Where do I find that on my server?
     
  13. MattW

    MattW Well-Known Member

    No, you don't need to modify the apache.conf file for this to work.

    Folder containing the font(s)
    fonts.PNG

    Code in EXTRA.css

    extra.PNG
    Then edit the style properties to set the font where you want it.
     
    Anthony Parsons likes this.
  14. Anthony Parsons

    Anthony Parsons Well-Known Member

    WOW.... that worked a charm. I screwed up with the preceding / before fonts, which was failing.... though quickly figured that out to the above and it works. OMG.... no server changes at all, just upload and use. Amazing.

    Thank you both for helping me get my head around this so it works. It is a little slow to get that initial font going by a couple of seconds, though once done, amazing.
     
    Tracy Perry and MattW like this.
  15. Tracy Perry

    Tracy Perry Well-Known Member

    If you are noticing a slowdown then there may be some fine tuning you need to do to your server - since the site and the font now come from the same source instead of making a separate call to Google.
     
  16. Tracy Perry

    Tracy Perry Well-Known Member

    Tracy Perry updated Serve Google fonts locally with a new update entry:

    Have bold, italic and normal fonts

    Read the rest of this update entry...
     
    Shelley likes this.
  17. jayramfootball

    jayramfootball Active Member

    Hmm all works well apart from the editor.... any ideas on what settings are required to change the editor to default to the google font?
     
  18. Tracy Perry

    Tracy Perry Well-Known Member

    You will probably have to edit the Redactor .JS file. I think that's where they are listed at.
     
  19. jayramfootball

    jayramfootball Active Member

    Ah thanks - any idea how I do that (obviously I can find the file, but what code?):confused:
     
  20. Tracy Perry

    Tracy Perry Well-Known Member

    Haven't really looked at it much since I'm not big into js coding. @Brogan or @Jake Bunce may have a clue. :D
    I'll look around and see what I can figure out. It's something that I've been wanting to do also but just haven't had the time.
     

Share This Page