Apendix 5: Adding New Fonts to Games
Downloading a font to your PC
An Internet search will turn up a long list of web sites offering free downloads for a wide range of fonts. This is because a great many fonts are in the public domain. All of the sites I visited provided fonts to download in a zip file. The zip file should contain one or more .ttf file. The Orbitron file I downloaded for the Minesweeper project contained:
Orbitron-Black.ttf Orbitrin-Bold.ttf Orbitron-Medium.ttf Orbitron-Regular.ttf
Such files are suitable for Windows, Linux and Apple Mac PCs
Installing a font on a Windows PC.
Unzip the .ttf files to a temporary location then type “Font” into the Windows search box. You should be offered the “Font Settings” option from Windows Settings. The top of that window has a clearly marked area where you can drag and drop the .ttf files. You can drop them all in one go. The font will then be installed.
Installing a font on a Linux PC
Extract the font .ttf file from the downloaded .zip. Locate the font file and right click. Then select “Open with other application”. When the dialogue appears, click “View all applications” and the scroll down to “Fonts”. Click “Fonts”, then the “Select” button. Once the fonts app has loaded and displayed the new font then click “Install”.
Installing a font on an Apple Mac
Extract the .ttf files from the downloaded .zip file. Use the “Launcher” to open the “Font Book” app. Click the + (plus) button and browse to the downloaded .ttf file(s). Select the file(s) and click “Open”. The app will install the font.
Using Web Fonts
Using a font from a CDN
Google maintains a long list of fonts at https://fonts.google.com/ which is great to browse. Once you have selected a font you will be shown a link that you can copy and paste into the <head> section of your HTML.
The Orbitron link is shown as an example:
<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
The download page also suggests the CSS rule you should use for the text that you want to use the font. Something like:
font-family: 'Orbitron', sans-serif;
Downloading a web font
Visit https://google-webfonts-helper.herokuapp.com/fonts or search for “Google Webfonts Helper”. Again, you can browse the long list of available fonts. Once you have selected a font you will offered a zip file download that you might want to unzip to a fonts subfolder in your game folder. There will also be some CSS to copy and paste into your CSS file.
The download package will include the font in a range of font file types. These are .eot, .svg. .ttf, .woff and .woff2. All popular browsers will support more than one of these file types but having the complete range means that any browser will be happy to use your font choice. The .eot option has just about reached the end of its life and .svg is only needed for old versions of iOS so you can cull the list if you want.
Typical CSS for a web font would be:
/* orbitron-regular - latin */
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
src: url('../fonts/orbitron-v12-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/orbitron-v12-latin-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/orbitron-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/orbitron-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/orbitron-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/orbitron-v12-latin-regular.svg#Orbitron') format('svg'); /* Legacy iOS */
}