Using custom fonts

1 Overview

Fonts are a work of art that draws the eyes. The basis of the Apple corporation, typography is a huge visual draw.

When it comes to the Internet, fonts are a very tricky business. Fonts have to be installed on a device. What fonts are installed on a mobile phone? What fonts are installed on a Mac compared to a PC? There are decisions to make.

The two primary categories are Serif and Sans-Serif. Serif means little tags at the start and end of letters. Sans-serif are very clean cut fonts with no frills.

Defined by maconprinting.com ... Serifs are semi-structural details or small decorative flourishes on the ends of some of the strokes that make up letters and symbols. An example would be the Times New Roman font. Sans serif does not have these details or flourishes. An example would be the Arial font.

The easiest way for the Internet to handle fonts was to have two types it understand. Literally "sans" and "sans-serif".

People do prefer more options in terms of fonts. Times New Roman is the most commonly available Serif font. Arial is the most common sans-serif. However on a Mac, Arial isn't widely available, it's closest equivalent is Helvetica.

Fonts are artistic and licensed like music or art. Operating System manufactures often licence a large amount of fonts, install them automatically on your machine and they are then available to your browser. How do you guarantee that font is available on your machine? http://www.cssfontstack.com/ gives you an idea of percentages of availability.

The safest bets are Arial / Helvetica and Times New Roman. They however get tired and very common. So what options are available?

2 Licensing Fonts

So every font has a licence. You can't just give fonts away for free. You have to make sure you have appropriate licences. Microsoft, Google and Apple are the biggest and most free licences if they're already installed on the machine.

If you use a design package like Adobe Photoshop. When you buy the program you also buy the font licences installed with the program. This means that these fonts are not yours to give away free on the Internet. It's ok to use them to create an image or document but not to use them in a web page.

You can also buy fonts that come with Internet licences. A great source for fonts is http://www.1001freefonts.com/ and they are also very clear about the licensing.

3 CSS - Custom Style Sheet

So in web pages the ability to set the font is done with a very simple instruction

body{
    font-family: Helvetica, Arial, Sans-Serif;
}

This makes the default font of the web page be, Helvetica. If that font isn't available, use Arial. If Arial isn't available, then use the system default sans-serif font. So you end up with something.

You can always add in whatever fonts into the list you like. Tahoma, Helvetica, Arial, Sans-Serif. So you'll know the attempt order.

This listing of fonts is often referred to as a "font set". A collection of fonts to be used in a specific order of availability.

However how do you use a font that isn't on someone's device?

4 Web fonts

As designers became more and more frustrated with the limitations of internet styling, the latest version of CSS, version 3, has a new ability.

@font-face {
    font-family: 'Ministry';
    src: url('Ministry-Light.eot');
    src: url('Ministry-Light.eot?#iefix') format('embedded-opentype'),
        url('Ministry-Light.woff2') format('woff2'),
        url('Ministry-Light.woff') format('woff'),
        url('Ministry-Light.ttf') format('truetype'),
        url('Ministry-Light.svg#Ministry-Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

This new rule represents compromise.

The browser manufacturers couldn't agree which font approach to use. So as a developer you have to accommodate for all types.

So if there's a font you want to use on the Internet you need to make sure you have all the versions of it available. Luckily there are great websites which can help do your conversions for you like https://transfonter.org/ You upload your font and it converts it to all the versions needed.

5 bxp and custom fonts

It is not allowed to put fonts up onto the bxp custom web folders through the System Access Management file loader. The reason being that it could lead to legal difficulties if the font file is available on the bxp server and shared globally if the client doesn't have the licensed permission to use it.

The All n One team can help you with your file conversion and getting the files onto the server. With the fonts loaded onto the servers, you add the @font-face to a custom css file and upload that .css file into the custom folder.

Then you set the Main Menu > System Access Management > System Management > System Settings > User Interface > CSS to have the custom .css file.

The final step is to use what bxp has available in terms of setting the system font set. Main Menu > System Access Management > System Management > System Settings > Primary Interface Options > System Font Set (CSS Layout) >