Helpful_Font_Tips



How to install and use in Windows:

Download and unzip the folder containing the new font.

Install the font as administrator by right-clicking the .ttf file and selecting 'Install for all users' checking it has the administrator shield shown next to it - (installing for all users as an administrator is recommended because it can help to resolve problems with fonts not listing correctly in some third-party programs like Inkscape, GIMP etc.).

To use - select the new font from inside the program where you wish to use it (if it doesn't appear in the list of available fonts, open Windows 'Font Settings' to see if it is installed OK on the system - if it isn't please try re-installing again using different administrative privileges/method - If it is installed try using it in other programs such as Notepad or Word to check if it's working OK elsewhere, this will allow you to track the problem to a particular program).

If you still have problems please try the options below:

Double tap/click on the .ttf file to open a preview window of the font to visually check if it is a valid font, click on install here as an alternative installation method.

Close and restart the program that doesn't show the font (once restarted check to see if it shows the other installed fonts?)

Restart the computer to reboot Windows (refreshes all the windows installed fonts and programs).

Possibly try editing a font that the original program does recognise with elements from the new font or by substituting the font that does work completely with a copy of the new font renamed to imitate it and placed in its original location (some programs use embedded fonts so the working fonts location could be in a different place than all the other windows fonts (this could be why the new font didn't work with this program?)).

If these fixes don't work you may have to switch to an alternative program that the font does work with.

Once the font is working use Windows Character Map to easily find, select and copy non-keyboard characters that you want to use and then paste them into your work.

Don't forget to embed, link to or include the new font with your finished work when exporting it to use elsewhere.



How to edit a font:

To edit a whole font or just change some of the individual characters open it in a free font editor like FontForge where you can see all the glyphs contained in the font and edit or copy the characters to create a new font. (FontForge can also be used to make .svg images from all the glyphs in a font (described below) which you can then use in online font editors like IcoMoon etc.).



How to create seperate .svg's (image files) of all the icons in a font using FontForge:

Run FontForge as administrator - important it will not work otherwise!
Open the font that you wish to create image files from.
Select File/Execute Script/- copy and paste the script code below into the dialog box there:

SelectWorthOutputting(); foreach Export("svg"); endloop;

Select FF, then press OK. - by default the .svg outputs are generated to: "C:\Program Files (x86)\FontForgeBuilds")

For neatness put all the files generated into to a new folder so that they don't get mixed up with other outputs you might create later. Use them online or in a suitable graphics program that can edit .svg's such as Inkscape. 

If it doesn't work? - check you are using FontForge as administrator and that you are looking for the output files in the correct place (if you installed FontForge in a different directory look there).



How to embed and use a font in an HTML website:

Make a new folder named 'fonts' in your main html folder (root directoy) - put your new font there.

Add the following code between <head> and </head> at the top of your index.html file (open it using Notepad or similar) or else if your website uses a .css file, put the code there without the <style> and </style> surrounding it).

<style>
@font-face {
font-family: your-new-font-name-here;
src: url(fonts/your-new-font-name-here.ttf); /* Relative url that points to the fonts folder */
}
</style\>

Use the following code in your index.html to display the font in a new paragraph - (Helvetica, Arial and sans-serif are just included in the code as good practice alternatives if a font cannot be found (the font-size and color can of course be changed to whatever you want).

<p style = "font-size:40px; font-family:your-new-font-name-here, Helvetica, Arial, sans-serif;  color: blue">This paragraph uses the style @font-face.</p>



How to use in Apps:

- Open your App in Android Studio and create a new font folder: app/res/font - then copy your-new-font-name-here.ttf to it.
- Reference the font where you want to use it in your layout using: android:fontFamily="@font/your-new-font-name-here"
