Web Fonts
Fonts have long been a problem with web design. If you specify what fonts you want your web page to be rendered with, the system rendering the web page has to have those fonts installed.
There were a relatively small set of fonts that were likely to be available on both MacOS and Microsoft Windows, but even there was no guarantee.
Web fonts help solve that problem. Web fonts are fonts that are sent with your content to be used by your web browser when rendering the page.
The easiest way to use web fonts is through a Web Font Service Bureau that offers CSS linking to their font server. Add the CSS to your document, and then specify the font they offer that you want to use like you would specify any other font.
DOMBlogger has built in support for two Web Font Service Bureau's and will likely be adding more.
Declaring Fonts
Once you have your site configured to reference the style that will load your fonts, you need to reference the fonts for them to actually be used by the web browser.
If you are using one of our standard fluid layouts, you can specify the fonts using the layout configuration tab within the DOMBlogger Web Application Administration interface by selecting the layout. If you are using one of the other layouts, you will need to create a custom css file, also in the same utility.
Note that with web fonts, bold and italicized versions are emulated by the browser and are not as nice as specifying the actual bold and italicized version.
The example below shows how to specify the different font variants fot maximum aesthetics:
p { font-family: 'your font w01', sans-serif; } strong { font-weight: normal; font-family: 'your font-bvar w01', sans-serif; } em { font-style: normal; font-family: 'your font-ivar w01', sans-serif; }
Of course you would replace the "your font*" with the name of the font as specified by the font burea.
The reason for specifying the normal font-weight / font-style in the respective elements is because the specified real fonts already have the additional weight or different style as their normal rendering.
Without those declarations, the browser will emulate them on top of what the font already looks like. This can have some interesting effects depending upon the font, but it is probably not want you want.
If viewing this page in the standard layout, you should see how the use of specifying the proper face improves the typeset look in the below figure:
Palatino Linotype web font
Palatino Linotype web font with browser emulated
bolding
Palatino Linotype web font with browser emulated
italic
Palatino Linotype web font with specified bold
font
Palatino Linotype web font with specified italic font
Of special interest is the difference in characters like w and f between the genuine drawn italic font and the emulated italic font.
Fonts.com web fonts
The fonts.com web font bureau appears to have the largest quantity of web fonts available, at over 10,000. Some of them are very high quality fonts.
They offer two different types of accounts:
Free Account
With a free account, you do not pay any money to use the fonts but there is a catch. The number of fonts available to freeloaders is greatly reduced, and the method of referencing the fonts requires the use of JavaScript.
The JavaScript they provide violates the scripting policy of DOMBlogger as it requires insertion of a script node within the document body. The server side filters would rip it out, so their JavaScript would never run and the fonts would never load.
It is possible to write a script the right way to be called from the document on page load, but I am not going to do that. The script not only loads their fonts, it results in an advertisement for their service.
Furthermore, relying up JavaScript is too fragile. Yes, most people surf with JavaScript enabled, but a lot of people use script blockers (such as NoScript) to select what domains they allow scripts from. Unless these users take action to specifically allow the domain fonts.com serves their script from, the JavaScript will never execute and the font will never load.
Until there is a way to use their freeloader service without JavaScript, DOMBlogger will not natively support their free account.
Standard Account
There are several levels of paid accounts, the Standard account is what I have played with and it is very affordable. It gives you access to an impressive much larger selection of fonts and you do not need to use JavaScript.
Once you have an account with fonts.com, simply create a new project. Add your domain to the project. Have fun picking the fonts you want to use and add them to the project. Do not worry about adding selectors.
When you click on the publish tab, the default option it gives you is a JavaScript option. You do not not want that, instead click on the "Option 2: Non-JavaScript" tab.
Copy the href part of the link tag and paste it into the fonts.com portion of the web fonts tab in the DOMBlogger Web Application Administration interface. This is the part that starts with http:// and ends with .css.
Take note of how they specify the font-family, that is how you need to refer to the fonts in your style sheet. For example, I am using Helvetica Condensed from their service. To use the font, I need to reference it as 'Helvetica W02 Cn' in my CSS style sheets.
Google Web Fonts
Google has a web font bureau offering free fonts, no license fee is required. To use web fonts from Google, go to the Web Font tab in the DOMBlogger Web Application Administration interface and specify which font(s) from Google you wish to use in your page design.
DOMBlogger will craft the style sheet request for you and add the CSS link to your document head. Specify the fonts and how you want to use them and you are done.