Serve Google fonts locally

Serve Google fonts locally

Overview Updates (3) Reviews (3) Discussion
TPerry

TPerry

Well-known member
Tracy Perry submitted a new resource:

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

I'm running Debian on my VPS, but it works the same no matter the ice cream flavor. :D
This is set for nginx, but the theory for Apache should be similar. I searched the resources, but found no reference to this.

Edited your nginx.conf and modified this entry
Code: 
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/javascript text/xml application/xml application/rss+xml application/atom+xml application/rdf+ application/atom+xml...
Click to expand...

Read more about this resource...
 
Tracy Perry updated Serve Google fonts locally with a new update entry:

Browser cache the fonts for NGINX

If you wish to use browser caching for the fonts in nginx, you will need to add
Code: 
# WebFonts
# If you are NOT using cross-domain-fonts.conf, uncomment the following directive
        location ~* \.(?:ttf|ttc|otf|eot|woff|font.css)$ {
            expires 1M;
            access_log off;
            add_header Cache-Control "public";
    }
to the main section for your root of the nginx host site configuration file.
Click to expand...

Read the rest of this update entry...
 
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/
 
Tracy Perry said:
I had a request to add a resource for using the fonts from Google directly. It's pretty much self-explanatory. 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.
Click to expand...

This is exactly how I was doing it before hosting them locally.
 
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...
 
Anthony Parsons said:
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...
Click to expand...
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.
 
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.
 
Anthony Parsons said:
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.
Click to expand...
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 said:
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.
Click to expand...
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.
 
MattW said:
You just need to FTP the fonts to your server, and set the CSS as mentioned in the guide.
Click to expand...
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?
 
Anthony Parsons said:
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?
Click to expand...
It's not the OS that handles the serving of the fonts, but the web server (Apache2, nginx, or LiteSpeed<sp>).
 
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.
 
Anthony Parsons said:
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.
Click to expand...
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.
 
Tracy Perry updated Serve Google fonts locally with a new update entry:

Have bold, italic and normal fonts

If you want to be able to use Google fonts locally as described, but notice that you can no longer use the Bold, Italics, etc ability from the ACP, here is your solution.

You will need to download the associated Bold, Italic and other fonts of that family from Google Fonts. Then, in your EXTRA.css you will need to define them as described - with the exception being you will give each definition in that family the SAME font-family name. You will also need to change the font-weight to align...
Click to expand...

Read the rest of this update entry...
 
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?
 
You must log in or register to reply here.
Back
Top Bottom