Font Styles FAQ

Ensure that the Font Manager Setting is set to Font Styles. Custom font will not show in edit mode when using Site Styles to manage your fonts.

Certain elements will not show your custom fonts in edit mode. For example, Top Bar will display custom fonts set to the Title Area but not to the menu items. They will however display correctly in preview and publish.

Ensure that the Font Manager Setting is set to Font Styles. You cannot use a separate custom H2 setting when managing your fonts with site styles.

Setting a separate custom H2 allows you to for example to define a bold font for H1 and the equivalent regular font for H2, or simply to give an extra font face choice.

Using this setting means that you have the options for H1, H2, and H3-H6 rather than the Site Styles options of H1 and H2-H6

Remember to define custom fonts for H3-H6 when using this setting. If you do not, the the fonts set in site styles H2-H6 will be used for H3-H6

Check that your URL to the font files is absolutely correct.

Check that you have defined at least, EOT, TTF and WOFF files to use (WOFF2 is recommended but optional).

Check the error console in your browser - if you have an error referring to CORS or Cross Origin Browser Sharing you will need to install the snippet provided in the stack edit mode in a .htaccess file in your fonts directory.

Safari will generally work when previewing from RapidWeaver when the font is on your server without any CORS permissions. Chrome generally will not. If your fonts are located on the server you are going to publish to then this will be resolved as soon as you publish and the site and the fonts are on the same domain without the need for CORS permissions.

All you need to do is add a file called .htaccess in the directory containing the fonts with a one line snippet to authorize access.

Font Styles can show you this snippet if you check the show snippet setting.

Header set Access-Control-Allow-Origin "*"

will allow the fonts to be served to any recipient.

If you want to limit the serving of fonts to a specific domain simply replace the asterisk with a full url for example,

Header set Access-Control-Allow-Origin "http://www.mySite.com"

Remember that when creating the file, just name it htaccess on your computer and then add the leading dot once in place on the server. Files beginning with a dot are OSX system files and will become hidden.

CORS permissions can also be enabled via php if required. There is much information on this available on line.

No, you don't need a WOFF2 file but it is highly recommended that you use one. Modern browsers that accept WOFF2 will use this instead of downloading the WOFF file and benefit from twice the download speed as the file is so much smaller.

Probably not in reality. Although SVG is the big up and coming thing with images and vectors this is not the case in relation to fonts.

The other formats are supported by the most recent versions of all major browsers (including Safari for iOS), so only a small (and shrinking) subset of users will be missing out on the downloadable SVG fonts. Moreover SVG fonts can expose a bug in older versions of iOS causing pages to crash. Keeping the CSS maintainable and allowing for a fallback for browsers that do not support @font-face is more important in general.

By all means use SVG but if you have problems (however unlikely) consider removing the SVG file

There are many web font converter sites that will convert one type in to another. Chances are that if you have one file type of a font, you will be able to simply produce the other required ones.

WOFF2 is typically not output by web font generator sites. There are several sites that will create a WOFF2 file from a WOFF or TTF file though

The Tag is simply a text area that you can use to make a note for yourself of which font you have used. This is more convenient than than having to open the link dialog and look at the URL when you come back to a project.

Each font weight requires a separate font file. If normal bold and italic were included for H1, H2 , H3 - H6 and Text, this would mean three groups of five URLs for each of the groups - i.e 60 file dialogs to fill in.

Given the availability of the extra H2 setting then it is easy enough to set a normal and a bold face for a particular font if required.

Using Font Styles, Site Styles and other stacks like Paragraph Plus and Header plus it is easy to use a lot of fonts on a page.

Not only with this seriously impact on your page performance but it will most likely look horrible. A recent survey of the top 100 most beautiful sites revealed that the average number fonts on a page was 3 - 2 of these being different weighted variants of the same typeface

Yes if you must, just make sure that the Font Manager setting is set to Site Styles.

Define the custom fonts that you require in the FontStyles stack, for example set Text and H2-H6 and then Set H1 in Site Styles to use a Google Font.