Unmaintained Serve Google fonts locally

OK, now that you have your Google Fonts being loaded locally adding them into the Redactor editor turns out to be an easy proposition. All you have to do is edit the js/xenforo/bb_code_edit.js file (make a copy of your original FIRST!) and do a search on Arial. Once you find that segment in the bb_code_edit.js file, adding your font is a simple matter of placing it where you want it in the other fonts. They are listed alphabetically by default.

Just as an example, I listed Ubuntu and Mondo - but I listed them at the top of the list by adding

Code:

Ubuntu:"Ubuntu",Mondo:"Mondo",Arial:"arial,helvetica,sans-serif"

in front of the original Arial placement (which was left in as a placement reference in the code segment above). You can place any additional ones you want using the format of
DISPLAY_NAME:"FONT_NAME",
where DISPLAY_NAME is what you want shown in the drop down.

If the DISPLAY_NAME is MORE than 1 word then you will need to enclose that name in quotation marks as demonstrated in the code below.
If the FONT_NAME is more than 1 word then you will need to follow the following format

Code:

"My Custom Font":"'My Custom Font Name'"

paying special attention to the single quote and double quote symbols before the My Custom Font Name segment.

*NOTE*
When entering the message the font WILL NOT be typed in the selected format, but when saved it WILL display in it.

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 with the associated style (bold, italic, normal).

An example is posted below.

Code:

@font-face {
    font-family: 'Muli';
    src: url('/fonts/muli-bold-webfont.eot');
    src: url('fonts/muli-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/muli-bold-webfont.woff') format('woff'),
        url('fonts/muli-bold-webfont.ttf') format('truetype'),
        url('fonts/muli-bold-webfont.svg#mulibold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'Muli';
    src: url('fonts/muli-regular-webfont.eot');
    src: url('fonts/muli-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/muli-regular-webfont.woff') format('woff'),
        url('fonts/muli-regular-webfont.ttf') format('truetype'),
        url('fonts/muli-regular-webfont.svg#muliregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Normal Text

Bold Text

If you wish to use browser caching for the fonts (not cross domain) 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 nginx host site configuration file under the location / directive.