Introduction

I often use fonts that are downloaded instead of links to an api. Whichever you choose for any project, this program offers easy access to both and can save some time looking through your font folder for something with just the right appearance.

To run this program on your own computer you
will need to have a local server (such as xampp).

This program makes it easy to pick a font and then change the both the text and text properties to see how it looks. The current functionality is covered in 'Changing The Text'. I may add more to really check each font's appearance with different colors, background colors, text-shadow, etc.

After downloading the font-family you can copy the code needed to embed the font into your program. Use the CSS or HTML buttons to copy either code to the clipboard.

There is a catch when adding your own fonts into the font folder (font_folder). Each font needs to be stored in a certain way, which takes time if there are a lot of them. Just follow the pattern shown by the other fonts that are already there.

Non-coders can still make use of any of the fonts shown here if they like. If this is all you need, then skip over to Download Fonts.

Changing the Text

There are several properties that can be changed to see if any given font is the right one for the job. These properties, their default values and the range of values within this program are as follows..

Once you picked a font-family, it will show up in the text area where new text can be entered and the stylings can be changed.

By hovering over the text area, the mouse wheel can be used to change the font-size. The mouse wheel can also be used to change word-spacing, letter-spacing and the margin between lines by pressing w, l, or m, respectively.

Clicking on the font-weight display found between the + and - signs will display all available weights for whichever font is being displayed at the time. This is useful for clearly seeing how the different weights affect the text when only a limited number of font-weights are available.

Seeing the font-weights for each font is also useful for anyone who decides to download the program. It's easy to make a mistake when adding new fonts to the font-folder. This will help check that the data for each font-weight has been entered correctly.

Save Settings

The settings and text are reset when the font is changed or the window is refreshed. To keep any of the settings, click the settings icon to choose which properties to preserve when changing fonts.

You can save which properties to preserve when the page is refreshed. Settings can be saved to the local storage or a json file. Local storage is checked first. The json file is on the server side, so on my site the settings will show any changes you make to the next visitor. Be respectful.

By picking 'neither' storage type, the checkboxes are reset every time the page is refreshed.

Download Fonts

Anyone who is not a developer can still download and instal these fonts so they are available to most any program that is run on your computer, like notepad, word processors, photo shop, etc.

All of the font files here include an open source license or equivalent. Feel free to download and instal any of these fonts.

1. Click 'File' under and to the right of the text area.
2. When the zip-folder downloads, right click on the folder and choose 'Extract all'
3. Different weights/styles are stored in separate folders. Once you have found where the actual font files are (like 'ttf' or 'woff') be sure to install
   all of the font-types, weights and styles.
1. Right click on each of the font types, weights and styles available.
2. Click 'Install' (or 'Install for all users')
3. Click 'yes' to authorize the font to be installed.

Download the Program

This 'font browser' is a personal storage system meant for coders to store their most frequently used fonts. To run this program on your own computer you will need to have a local server (such as xampp) installed. Google 'xampp' and follow the instructions for downloading and installing. There are also a lot of videos for this.

After downloading the font browser, extract the contents of the zip folder. Then, if xampp is used, put the font_browser folder anywhere in the xampp/htdocs folder. Other local servers may
vary on which folder to keep your programs in.

Adding new fonts will mean setting up some json files for each new font family. There is a '__zzz' folder with two json files that can be copied to save time. This is temporary since I eventually plan to create some functionality to make 'uploading' and storing new fonts much easier.

Take a look at how some fonts have already been organized. Each weight/style has it's own folder along with a data.json file that has at least the font weight and style properties in it. A json file called 'data_overall' is also included within the main folder with at least the font name in in.

Trouble-shooting

There is one possible 'hiccup' that you may experience once xampp is installed and the font-browser is placed within the correct folder. It has to do with a ZipArchives class that is included by default for PHP 5.6 and above.

Let's assume you are using a recent version of xampp with PHP 5.6 or above, but both download buttons result in a 404 error. To correct this you need to go into the php.ini file in xampp/php. Uncomment (remove #) from the line:

'#extension=zip'

Then stop and re-start the Apache server.

If this still does not work, click 'Config' in the xampp control panel, then click 'Apache (httpd-ssl.conf)'. Finally, add or uncomment the line:

'LoadModule deflate_module modules/mod_deflate.so'

Stop and start the apache server again and run the font-browser. It should work from there.

Last Words

In case you'd like to make a shortcut on your desktop, there is a font_icons folder within an images folder that can be used to customize the shortcut a little. These images will need to be put outside the local server folder (in your pictures folder for example) for them to be used for this.

To add an icon, right-click the shortcut, then click on 'Properties', then 'Change Icon'. Finally, click on the icon of your choice. Simple, right?

To the coders who use this program, I hope this makes your programming more productive. Also, keep checking back once in a while for updates, like adding color and text-shadow or being able to add new font-families with a simple drag & drop.

Licensing

All of the fonts here can be found on google-fonts. A text document is included with each font-family that covers the open source type of legal licensing for any use and further distribution of said font-family. That's as legal minded as I get.

About / Contact

Anyone can e-mail me at themusiciansforumonline@gmail.com