Welcome to my Football Manager Blog, the main purpose of this blog is to provide updates on the status of my Football Manager Skins & Guides Website

Friday, 3 July 2015

FM2015 Skinning Guide Part 2: Changing the Font Settings


Welcome to the second part of my updated Skinning Guide for Football Manager 2015.

Before reading this guide make sure you have read the first part of the guide as well as the extracting files guide, as this guide will assume you have followed those guides.

The previous guide talked you through creating a new skin, albeit one that is identical in appearance to the default skin, this part will explain how to edit the font and text settings in FM2015 (which has changed a little from previous versions).

Before starting I advise you have the following folder locations open:
  • -          Your 'Working' Folder Location from the previous guide (which is where you extracted the default game files to)
  • -          The my_first_skin folder within your Saving Location
  • -          The Fonts Folder for your computer, if replacing the fonts (found at C:\Windows\Fonts)

Editing the Fonts

Editing the fonts in Football Manager 2015 is slightly different from previous versions, the font settings are no longer contained by the xml files within the settings folder but are instead (largely) contained within the various xml files located within the fonts folder for your skin (though some settings are still annoyingly controlled by the panel xml files).

First you need to locate the default font files these will be found in two locations within the files located inside your 'Working' Folder:

-          \skins\fm dark-widgets\fonts
-          \fonts

The first location stores font settings unique to your skin (if you are not basing your skin on the default dark skin then you will need to look in the widgets folder for the parent skin to your skin) and should contain 54 xml files.

The second location is the generic font folder for the game and contains files that aren't skin specific, in this folder should be four xml files and seven actual font files. [When looking for files you want to take them from the skins folder first, only take files from the fonts folder if the file cannot be found within the skins location, such as the actual font files).

When editing the fonts the first thing you need to do is to create a fonts folder within the my_first_skin folder. 

To do this browse to the my_first_skin folder, right click in the window and select new -> folder then rename the new folder to fonts, your my_first_skin folder should now look like this:



Now there are several ways to edit the fonts depending on what you are wanting.


1. The Simple Method – Easiest Method but gives the least control.

If you only want to replace the actual font and don't want/need to adjust the sizes or font style then you can use this method.

First locate the files for the font you want to use, if it's a common font it should be located in the Windows Font folder (C:\Windows\Fonts – if you are using a Mac or Linux they should have their own locations) or alternatively you may have downloaded the font you want to use, the type of font doesn't really matter the game prefers opentype fonts (.otf) but will read truetype fonts (.ttf) aswell though you may need to change the file extension of ttf fonts.

Now you have your font file(s) you next need to copy them into the my_first_skin\fonts folder you just created.

Next you need to rename your font files to match the default fonts used by the game, the game uses three fonts by default: ProximaNova-Reg, ProximaNova-Bold and ProximaNova-Sbold, now you just need to rename your font to match those names, if your font doesn't have bold versions then create extra copies of your font until you also have three font files and rename each of them so you should now have three fonts called ProximaNova.

Also if you used .ttf files then you'll need to turn on file extensions in windows and change the file extensions for your fonts from .ttf to .otf for the game to read them correctly.

In the below example I have replaced the default fonts with the Segoe Script font:



And this is an in-game screenshot:



However as you can see in the in-game screenshot some content is cut-off due to the character spacing being different in this font.

This method is only really recommended when you are replacing the default font with a similar font, for cases where the font doesn't fit straight in you'll want the second method.


2. The Proper Method – Bit more time consuming but allows full control of font settings.

This method is a little more complicated however it gives you full control over the size and style of the font and also allows you to have different fonts on different parts of the screen.

First locate the files for the font you want to use, if it's a common font it should be located in the Windows Font folder (C:\Windows\Fonts – if you are using a Mac or Linux they should have their own locations) or alternatively you may have downloaded the font you want to use, the type of font doesn't really matter the game prefers opentype fonts (.otf) but will read truetype fonts (.ttf) and for this method the file extension doesn't matter.

Now you have your font file(s) you next need to copy them into the my_first_skin\fonts folder you just created. However this time around you don't need to bother renaming the files.

Next you need to browse to the \skins\fm dark-widgets\fonts folder located within your 'Working' Folder as this is the location that contains the various xml files we need to edit.

Whilst this folder may look daunting at first most of the settings we want to edit are located within the text.xml file, so copy this file to the my_first_skin\fonts folder.

Now open the text.xml file you copied over (not the original file, but the copy, you always want to edit the copy not the original) with Notepad++.

The text.xml file controls the base look of any text in the game assigned to the text spec, it also acts as a base for some other text specs and as such changes made here will affect most of the text in the game, though code from elsewhere can override some of these settings.

The code we are interested in is near the top of the file:

<string id="file_name" value="ProximaNova-Reg.otf"/>
<real id="font_size_small" value="8.5" />
<real id="font_size_normal" value="9.7" />
<real id="font_size_large" value="11" />
<integer id="fill_colour_red" value="255" />
<integer id="fill_colour_green" value="255" />
<integer id="fill_colour_blue" value="255" />
<integer id="fill_colour_alpha" value="255" />

Whilst this file contains a load more code we aren't really interested in that at the moment as that code controls how the game displays bold, italic, shadowed etc… code and unless you are doing advanced changes you shouldn't need to edit any of those settings.

The following line determines what font the game uses for any text that uses this file:

<string id="file_name" value="ProximaNova-Reg.otf"/>

To change the font we just need to change the text that appears under the value part (like we did in the first guide when naming our skin).

For example we are going to change the font to display the Times New Roman font; first we need to locate the Times New Roman font which in Windows is located in C:\Windows\Fonts, once you have located the Times New Roman font copy the file into the fonts folder for the my_first_skin and note that the filename of the Times New Roman font is simply called times (this is in Windows 8, if you are using a different OS the filename might be different), there are also three other files copied over which are italic and bold versions you can safely delete the files called timesbi and timesi as they aren't needed but timesbd might be.

Now we change the above line to read:

<string id="file_name" value="times"/>

Note that I have removed the .otf bit from the line as the game doesn't need the extension listed to read the file and it saves you having to work out what the extension of your font file is. Also note that the name you copy over is the name of the actual font file you copied to your fonts folder not the name of the font used.

There are also two lines further down that you might need to change (though I don't think they are actually used?)

<record style="semi_bold" file_name="fonts/ProximaNova-Sbold.otf" boldness="0"/>
<record style="bold" file_name="fonts/ProximaNova-Sbold.otf" boldness="0"/>

You just change these to reference the bold version of the times font (timesbd):

<record style="semi_bold" file_name="timesbd" boldness="0"/>
<record style="bold" file_name="timesbd" boldness="0"/>

The next three lines control the size of the font, with the game having three different font sizes:

<real id="font_size_small" value="8.5" />
<real id="font_size_normal" value="9.7" />
<real id="font_size_large" value="11" />

These values are listed in pixels (same format as used in word, excel etc…) to adjust the sizes you just need to change the numbers to suit.

The final four lines we are interested in control the colour of the font:

<integer id="fill_colour_red" value="255" />
<integer id="fill_colour_green" value="255" />
<integer id="fill_colour_blue" value="255" />
<integer id="fill_colour_alpha" value="255" />

To change the colour you need to adjust the value on each line, valid values range from 0 to 255 with the first three lines adjusting the amount of red, green and blue used, where 255,255,255 as already set is white, 0,0,0 is black, 255,0,0 is red, 0,255,0 is green etc…

Whilst the alpha value affects how transparent the colour is, 255 gives you a solid colour, where 0 makes the text completely transparent, though for the most part you shouldn't need to adjust the alpha value.

To change the text colour you need to know the RGB value of the colour you want, the easiest way to get this is from an image editing program.

So load up paint.net, and in the Colors panel at the bottom left click the more button to expand the panel and it will now show the RGB value of the selected colour and as you change the colour on the colour wheel you'll see the RGB values change.

For example what I want you to do is to select the top yellow colour on the colour bar below the colour wheel which should give you an RGB value of 255, 216, 0.

Next I want you to enter these values into the xml file to change the font colour from white to yellow, so the above lines should now look like this:

<integer id="fill_colour_red" value="255" />
<integer id="fill_colour_green" value="216" />
<integer id="fill_colour_blue" value="0" />
<integer id="fill_colour_alpha" value="255" />

Now save the file and if you haven't already load the game and reload/select the My First Skin (Dark) Skin in game and note how most of the fonts have changed to Times New Roman and some of the white text has turned yellow as seen in the below screenshot from the Home page:


Note however that not all the text fonts have changed to Times New Roman, the subpanel titles (green text) and blue links are still using the original font, this is because the font settings for these items are controlled by different files, also note that some of the text which changed fonts didn't also become yellow this is because the colours for these bits of text are controlled elsewhere (which we'll explain in the next guide).

For example to change the title font we need to edit the title.xml file from the fonts folder as this is the file that controls that text, so copy this file over to the my_first_skin\fonts folder and open the copy and you'll find the now familiar seven lines of code but with slightly different values and you just edit these in the same way as above. It is then just a case of repeating until each font you want is replaced.


If you want to undo any of the changes you have made you can either undo the code changes you made in the xml files by following the above instructions in reverse.

Though an easier method if you want to undo all the changes made to a file is to just delete the xml and font files you added to the my_first_skin folder and when you reload the skin in game the game will just go back to using the default files.

You can also download a copy of this guide in several different formats for offline viewing:


---
Redistribution Terms

You are free to post this content to your website provided:

1. It is not sold or behind a paywall.
2. You don't advertise it as being exclusive to your website.
3. My username and blog address are included: http://michaeltmurrayuk.blogspot.co.uk/

If linking to the guide please link to this page rather than the direct download links as the links may change with updates.