The text which appears on websites is usually in two forms – text converted to images (rendered) or text in the more traditional sense which uses the fonts on your computer to display the content of the page.
In Opus, Rendered text will be converted to SVG format and retains the original quality but not the hinting which most fonts incorporate to improve the look of small sizes. It can also create larger files and is not good for search engine optimisation. It is not appropriate for large amounts of small text. Thus the body text of websites needs to be text and as different users have different fonts available. web designers are restricted to a set of common fonts found on almost all computers To make sure they know what the website will look like on anyone’s computer they often have to stick to Arial or Times.
An alternative is also available which uses a special feature called @fontface in the HTML to use web fonts from a server. The most common of these are the free web fonts provided by Google.
You can also get web font versions of fonts, or convert your own fonts to webfont versions via conversion services such as www.FontSquirrel.com but make sure you have the relevant licence to do so.
Opus lets you use any combination of any of these options when creating your HTML5 publication via a Web Font Manager which is available from the Tools menu.
The Web Font Manager lets you decide how the fonts in a particular directory will be treated. Select the directory from the list and press Edit to modify the setting and choose one of the following.
Use the Publish option to use particular fonts you want on your material but which are not available as Google Web fonts and which you have converted yourself. Make sure the directory contains the same font in all the webfont formats – TTF, SVG and WOFF. Opus will automatically copy the files to your publish directory so that they can be transferred to your web server along with your HTML.
Google provides a wide range of free fonts for use on web pages. Opuscannot see these fonts while editing unless you download the TTF version from Google and make it available via the Web Font Manager.
This will cause the fonts to be converted to vector graphic (SVG) and therefore will no longer be editable, or searchable. Should not be used for text input or test with variables in and is not recommended for long pieces of text.
Note:
Using the Convert Text to Vector in the Opus Editor will have the same effect as Render Font which can be useful if you want to convert a piece of text in a font which is set to one of the other options.
With this option selected the font will not be distributed with your publication in any way. Instead, any text using it will rely on finding the font on the viewer’s system. If it does not find the particular font it will make a substitution and obviously this may mean the formatting of text changes in unpredictable ways.
This is best used for the websafe fonts listed in the next section as they can be assumed to be on all systems.
To make best use of the Web Font Manager you need to put fonts you want treated differently in different directories so you may want to organize your fonts along the following lines.
The bulk of your fonts will be In your Windows Font directory keep any fonts you want to use but which can be rendered and set the Rendered option in the Web Font Manager (this is the default setting).
There are a number of fonts which are sometimes assumed to be "websafe" as they are present on almost all Mac and Windows systems. These are listed below. We recommend you copy these fonts from your Windows/Fonts directory to a separate directory so that you can differentiate how these are dealt with.
These fonts can be set to Do Not Publish in the Web Font Manager. Any text will therefore use the system font and the text will be fully dynamic
Arial, Courier, Times, Andale Mono, Comic Sans, Impact, Georgia, Trebuchet, Verdana, Webdings
However these fonts are not supported on Android.
We have therefore hard-wired fallback fonts for serif, sans-serif and monospaced and we recommend you use these for any basic text if you do not wish to use webfonts. Opus will use Times, Arial and Courier New to present these fonts in the editor. For Android we recommend only using Arial for the main body font.
Remember
Opus Preview is only an approximation of the output. To be certain of your layout you should test the material after publication on as many different browsers and systems as possible.
Google provides a wide range of fonts specifically for use in web pages at
These can be used freely in your website and allow for much more interesting text which remains dynamic and can be selected and can display variables.
Opus installs a special directory for these fonts and includes two examples. You can get further examples from Google and FontSquirrel – there are links on the web font manager dialog. You only need to download the TTF version to allow Opus to see them. Opus will automatically connect to them when you publish the HTML.
Use the Google Web Font option in the Web Font Manager for these fonts.
Many other fonts are available as web fonts. Furthermore, your existing True Type (TTF) fonts can be converted to a set of web font files (sometimes referred to as a webfont kit) using conversion services such as FontSquirrel. You will need to ensure that the licence for the font concerned permits conversion to and/or use as a web font.
To use these custom fonts you will need all the formats of the font required for web support – TTF, EOT, SVG and WOFF. These files should be provided in the directory you have specified in Web Font Manager and must be manually uploaded to your webserver with the HTML5 which uses them.
Only fonts in the directories which you have ticked in the Web Font Manager will appear in the font list in the Opus Editor.
We automatically highlight the Web Fonts in the Font list with different coloured backgrounds as follows:
Web Safe Fonts – light blue background.
Google Web Fonts – light purple background
Custom Web Fonts – darker purple background.
Windows Fonts – standard white background.
The web safe fonts are hard-wired and so cannot be changed.
Opus automatically creates a default directory for both Google Web Fonts and Custom Web Fonts in your Users directory and installs example fonts to get you started. You can add fonts to these preset directories.
Use Windows Explorer to locate C:\Users\ <your user account name> \Google Web Fonts to add the TTF files for any additional Google Web Fonts you want to use.
Browse to C:\Users\<your account name>\Custom Web Fonts to add the files for any custom web fonts.
Alternatively use the Web Font Manager to add another directory where you have put your web fonts.