• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Serve Google fonts locally

Serve Google fonts locally

Allows you to serve the Google fonts from your own server

Tracy Perry

Well-known member
#1
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...
Read more about this resource...
 

Tracy Perry

Well-known member
#2
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.
Read the rest of this update entry...
 

Tracy Perry

Well-known member
#3
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/
 

MattW

Well-known member
#4
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.
This is exactly how I was doing it before hosting them locally.
 

Anthony Parsons

Well-known member
#5
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...
 

Tracy Perry

Well-known member
#6
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...
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

Well-known member
#7
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.
 

MattW

Well-known member
#8
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.
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.
 

Tracy Perry

Well-known member
#9
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.
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

Well-known member
#10
You just need to FTP the fonts to your server, and set the CSS as mentioned in the guide.
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?
 

Tracy Perry

Well-known member
#11
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?
It's not the OS that handles the serving of the fonts, but the web server (Apache2, nginx, or LiteSpeed<sp>).
 

Anthony Parsons

Well-known member
#14
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

Well-known member
#15
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.
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

Well-known member
#16
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...
Read the rest of this update entry...