Add New Fonts – Google Fonts and More
Font Control with Weaver Xtreme Plus
Weaver Xtreme Plus adds a whole new font control section to the Main Options:Custom tab that allows While the free version of Weaver Xtreme allows you to select from about a dozen different fonts generally supported by a majority of modern browsers, Weaver Xtreme Plus allows you to specify support for any of hundreds of free Google Web Fonts, Font Squirrel, or virtually any other font source – including commercial or self-hosted font definitions.
A demo of all the Google Fonts included with Weaver Xtreme and Weaver Xtreme Plus is found here.
Introduction to Adding Fonts
The fonts used for any web site come from two sources: the fonts supported directly by browsers, and custom fonts that are loaded with the contents of the page.
Which fonts are available to a specific browser depend on several factors: the specific browser (Chrome, Safari, IE, Android, etc.), and the host operating system. While all browsers will support basic serif, sans-serif, and monospace fonts, any other fonts supported are really not guaranteed. There are quite a few fonts supported by most browsers, and the dozen fonts supported by Weaver Xtreme free will look good and display as intended on most browsers. The default font families include alternate font specifications (called a font stack) so that your site will look pretty much like you intended on the vast majority of browsers (except Android devices, which support only 3 fonts.)
If you want total control over the fonts displayed on your site (including modern Android devices), you have the option of specifying a custom font that is loaded right along with the rest of your page content. Weaver Xtreme Plus supports adding custom fonts from various sources, including Google Fonts, Font Squirrel, and other sources. These are added from the Weaver Xtreme Admin: Main Options : Fonts & Custom tab. Important: the added Font Control options are not available in the Customizer interface, and you MUST install the Weaver Xtreme Theme Support plugin to get access to these options. After you’ve added a new loadable font, it will show up on the drop-down Font Family selection option found for most areas and text options in the Weaver Xtreme admin tabs.
When you add a loadable font, two kinds of HTML statements are required to be able to use the font. The first is a specification of the source of the font definition. This is most typically handled by adding a <link> statement in the <head> section of your page. This <link> usually loads a .css file which has statements to load the font definition files. This file can be self-hosted, or in the case of Google Fonts, is hosted on Google servers. In any event, the font definition files must then be loaded by the browser, and each font you load incurs some loading overhead – about the same as loading a moderately sized image (20K to 100K bytes). Keep this in mind and only define fonts you actually use.
Once a new font has been loaded, you then need to be able to specify what text should be displayed using the font. This is accomplished using CSS styles and specifying a font-family. For example: .font-roboto{font-family:’Roboto’,sans-serif;} or adding a style=”font-family:’roboto’,sans-serif;” to a <div>. Fortunately, Weaver Xtreme Plus really simplifies this task. Font that you define will be added directly to the standard Weaver Xtreme Font Family options. Note that font size, bold, and italic properties are controlled by the Weaver Xtreme option interface for all defined fonts.
Adding a New Font
Open the Weaver Xtreme Admin: Main Options : Fonts & Custom tab.
Weaver Xtreme Plus Font Control Admin
Given that adding most fonts requires specifying the <link> load statement, and specifying a font-family for the font, you can use the Weaver Xtreme Plus interface to add almost any loadable font to your site. Basically, you add the appropriate <link>, and specify a font-family. With Google Fonts, that is all that is necessary. For other free font sources like Font Squirrel, you will likely have to upload the font definition files to your own site and specify the correct address for the <link> statement.
Google Web Fonts
Google Web Fonts is a collection of hundreds of free fonts available from Google. Weaver Xtreme Plus does provide a single click install option for the most popular 35 or so Google Fonts (ususaly limited to standard weights). But Weaver Xtreme Plus also allows you to browse all the fonts available using the Google site interface, and then simply copy/paste the <link> and font-family values required to use any Google font.
Note: You should understand that when you use a Google Web font, the browser viewing your site must upload the font’s definition from the Google server, and your site’s performance might be affected by how fast Google is able to deliver the font definition. Normally, this will not be a problem, and you should use Google Web fonts without undue concern. You might want to pay attention to the page load meter provided on the Google Font Quick Use page, and pick fonts with a Green level impact.
Follow these directions to add your favorite font from Google or other source – one font at a time.
- Google Fonts: Go to Google Web Fonts site to select a font (including desired style options). Click the red + circle to add the font to the Family Selected pop-up box that will be displayed on the bottom right.
- Open the Family Selected box. From the “Embed Font” section, copy the <link> code to the text box. (e.g.,<link href=”https://fonts.googleapis.com/css?family=Pangolin” rel=”stylesheet”> )
- From the Family Selected box, from “Specify in CSS” section, copy the font-family: code to the text box. (e.g. font-family: ‘Pangolin’, cursive; )
Once you have these filled in, click “Save Settings”, and the font will be added to Weaver Xtreme’s settings, and you can use the font from the standard Font Family option.
Adding Multiple Google Fonts
The above instructions apply to adding a single Google Font at a time. You can also optimize font loading by defining a single <link> definition for multiple fonts. For example, this is the Google “Families Selected” popup for three font families:
Google Font Famlies Popup
Note that the <link> field includes all three fonts, while the CSS rules have each family on a separate line. When adding these fonts, you should copy the <link> definition only to the first item “2. Google Fonts” field, along with the first CSS font-family rule (‘Grand Hotel’ ,in this example) into the item 3 field. Click “Save Settings”. Then repeat adding just the item 3 CSS definition for each of the other font families.
Font Squirrel
This section describes how to add a font from Font Squirrel. In this case, a specific font called GoodDog is used.
- Find font. This example will be for Font Squirrel (http://fontsquirrel.com). We picked GoodDog.
- Download the font. Font Squirrel requires this.
- Open the Font Squirrel “WEBFONT GENERATOR” tab.
- Generate the fontkit – upload the unzipped font to the Add Fonts. Download the font kit .zip file.
- On your computer, unzip the fontkit. There are 6 files of interest: stylesheet.css and 5 actual font files: xxxx-webfont.woff2,.woff,.ttf,.svg,.eot (This number may vary depending on source of font.)
- You need to copy those 6 files to your website. (You can upload them all if you want – doesn’t hurt anything, really.) Use your hosting control panel, ftp, or even a WP plugin. Doesn’t matter. You can put these files almost anywhere, but remember that the /uploads directory survives updates, so we suggest creating a directory called fonts there: /wp-content/uploads/fonts/. Now, for each font you upload, create its own directory under /fonts. For example, for GoodDog, we created /wp-content/uploads/fonts/gooddog. We then uploaded the appropriate GoodDog files from my computer to that directory.
- In the font kit stylesheet.css file, you will see a value that gives the font-family name. In this example, that is: font-family: ‘gooddogregular’; This is the value we need for the next step.
- Now, open the Weaver Xtra Main Options : Fonts & Custom tab. With the Xtreme Plus plugin installed, there will be the item 2 box. In the text box, enter:
<link href=’/wp-content/uploads/fonts/gooddog/stylesheet.css’ rel=’stylesheet’ type=’text/css’>
where, of course, you use your font name instead of gooddog. Note this is a path starting with a ‘/’. This means it is from your site’s root directory. Thus, it is independent of your site name, and you don’t need the http://example.com at the front.Note that if the fontkit you created on Font Squirrel included several font-families, you will only need to specify the <link> for the first font you add. You will need to add a font-family definition for each font-family included, so just leave the link field blank to specify additional font-families included in the main <link>statement. - In the item 3, font-family text box, enter:
font-family: ‘gooddogregular’;
In this example, you might add fallback fonts: cursive,serif just in case the browser can’t deal with the uploaded font. You will need a separate font-family definition for every font included in the <link> statement. - Click the “Save Settings” button.
And now, you’ll have gooddogregular show at the bottom of all the Weaver Xtreme Font Family options, and you can apply your new font with an easy click!
TypeKit
From the Weaver Xtreme Main Options : Fonts & Custom menu (there is no equivalent for the Customizer):
Step 1: in the <link> or <script> box (item 2), enter the <script> that TypeKit provides when you build your Kit. This are usually two <script> statements instead of a <link> value.
In the font-family box, (item 3), enter the font-family definition. BUT, you MUST change the font-family specified on the TypeKit info box. You MUST change double quotation marks to single. So, for you would need to enter something like font-family: tk-ff-speak-web,sans-serif; for item 3, depending on the font-family name.
Other Font Kits
While Weaver Xtreme Plus makes it easy to use Google Web Fonts or from other sources like Font Squirrel, you should also be able to use Font Control to help you use fonts from other font services. s
Almost all font sources will provide you the proper code to load the font, usually a <link>, but sometimes a <script>, and a font-family name. Just paste the appropriate values in the the appropriate fields. If you are self-hosting, upload your fonts to the /wp-content/uploads/fonts directory as explained above for Font Squirrel.
Deleting Fonts
After you’ve added a new font, an area called Remove Added Fonts will be displayed. You can check any fonts you wish to remove, and then “Save Options” to remove them. Remember that any font that shows in this list will cause the font definition to be loaded onto the page whether or not it is used. During site development, you can add as many fonts as you want, but when your site is ready for release, you should delete any fonts you aren’t using.
Font Styles Included with Default Google Font Set
Many Google fonts provide many different styles (font weight, italic, bold, etc). When providing the default Google Fonts, the different styles available did not necessarily include every font style variant available. Generally, the “normal” styles were included – normal and italic; and the “normal” named weights: normal (400) and bold (700).
If you need more font styles (which must then be used with custom styling rather than the standard options provided by the WP content editor), you can simply add any Google Font using the above instructions.
A demo of all the Google Fonts included with Weaver Xtreme and Weaver Xtreme Plus is found here.
This is a list of the font styles included with the default Google Fonts provided with the Xtreme Plus:
Oswald:400,700
PT+Sans:400,700,400italic,700italic
Raleway:400,700
Ubuntu:400,700,400italic,700italic
Montserrat:400,700
PT+Sans+Narrow:400,700
Arimo:400,700,400italic,700italic
Yanone+Kaffeesatz:400,700
Oxygen:400,700
Titillium+Web:400,400italic,700,700italic
Noto+Sans:400,700,400italic,700italic
Dosis:400,500,700,800
Bitter:400,700,400italic
Merriweather:400,400italic,700,700italic
PT+Serif:400,700,400italic,700italic
Playfair+Display:400,700,400italic,700italic
Rokkitt:400,700
Noto+Serif:400,700,400italic,700italic
Indie+Flower
Dancing+Script
Droid+Sans+Mono
Ubuntu+Mono
Nova+Mono