[Google Pixel 2 XL Themes, Apps, and Mods] sharkie405:
How to Make Your Own Flashable Font Zips​

Picking the Right Font

Notice the image below.

The screenshots are of the following:

Quick Settings

XDA Labs

The Project Fi App

My app drawer

In just these four snippets we have six different font weights. A font weight typically refers to the thickness or thinness of a font, as well as styles like italic.

In the first post, I mentioned that I will only put together files with a certain amount of font-weight files. This is because, as you can see from the image, they are necessary.

Now, you could Google your favorite font, and find it in only one weight -- regular. Then you could apply that regular weight font to the twenty different types of font files that are found natively in /system/fonts so that all of your font files are now replaced by that one font weight file you found.

What you'll have then is a mess, in my opinion. Apps layouts are designed with certain font weights in mind. Aside from that, they are also used to draw the users attention to certain things. Important things are usually bold. Headers are usually bold. Italics can emphasize a point in a different way. Some things, like the app drawer, for example, used a condensed font so that as many letters as possible can be used in the relatively small space allotted for icon text. As you can see in my image, even though I've used an Ubuntu condensed font for the app drawer, there still isn't enough room. Imagine if I used a non-condensed font. I might only get half of what I'm getting now.

My point is this: You should really try to find a font that has as many weights as possible.

Below is a list of all the native fonts in /system/fonts:

Roboto-Black.ttf

Roboto-BlackItalic.ttf

Roboto-Bold.ttf

Roboto-BoldItalic.ttf

Roboto-Italic.ttf

Roboto-Light.ttf

Roboto-LightItalic.ttf

Roboto-Medium.ttf

Roboto-MediumItalic.ttf

Roboto-Regular.ttf

Roboto-Thin.ttf

Roboto-ThinItalic.ttf

RobotoCondensed-Bold.ttf

RobotoCondensed-BoldItalic.ttf

RobotoCondensed-Italic.ttf

RobotoCondensed-Light.ttf

RobotoCondensed-LightItalic.ttf

RobotoCondensed-Medium.ttf

RobotoCondensed-MediumItalic.ttf

RobotoCondensed-Regular.ttf

Well, that's not entirely accurate. Those files listed are the important ones. Replacing those files will, for the most part, replace everything that you'll see.

Notice that there are twenty different font weights available for the Roboto font. This is the ideal situation.

I'll go ahead and say that you're not likely to find a font that you really like that comes with even half that many weights.

Hence, in the first post I said to have at least these weights in any fonts that you want me to make: bold, bold italic, regular or medium, regular italic or medium italic. In my opinion, those weights should be the absolute least amount that you settle for. And, I'll say it again, even finding a font with just that many weights is difficult.

So, let's say you've found a font that has at least the weights that I recommend. Continue on to the next section.

Replacing the Stock Font Files with Your Own

For our example, we'll use the SonySketch font that someone requested I make.

Below are the font files that were the zip I was given:

SonySketch-Bold

SonySketch-BoldItalic

SonySketch-Italic

SonySketch-Regular

Now technically, that's a little short of what I asked for; however, "Italic" can be taken to simply mean regular italic or medium italic, so it works.

Next, we have to figure out how to turn those four font files into the twenty stock files.

Basically, we'll just copy the SonySketch files, then rename the copies to match stock fonts.

So, lets start with the bold.

I know from double clicking the font files on my PC and then viewing the font that, the "Black" font/weight is a bold or bold-ish weight. So, we'll use the SonySketch-Bold for the Roboto-Black file, Roboto-Bold, and RobotoCondensed-Bold.

I'll copy the SonySketch file and rename that copy to Roboto-Black. Now we have a Roboto-Black file that is actually the SonySketch-Bold font.

I'll repeat that step two more times for the other Roboto bold font weight files.

I'll use the SonySketch-BoldItalic for Roboto-BlackItalic, Roboto-BoldItalic, and RobotoCondensed-BoldItalic (since the SonySketch didn't come with a condensed weight).

In the end, this is what we did:

SonySketch-Bold --> Roboto-Black

SonySketch-Bold --> Roboto-Bold

SonySketch-Bold --> RobotoCondensed-Bold

SonySketch-BoldItalic --> Roboto-BlackItalic

SonySketch-BoldItalic --> Roboto-BoldItalic

SonySketch-BoldItalic --> RobotoCondensed-BoldItalic

Now, let's look at the SonySketchRegular.

Since SonySketch didn't come with thin, light, or medium weights, we'll have to use regular for those weights as well.

Following the same copying and renaming scheme from above, we'll do this with the SonySketch-Regular file:

SonySketch-Regular --> RobotoCondensed-Light

SonySketch-Regular --> RobotoCondensed-Medium

SonySketch-Regular --> RobotoCondensed-Regular

SonySketch-Regular --> Roboto-Light

SonySketch-Regular --> Roboto-Medium

SonySketch-Regular --> Roboto-Regular

SonySketch-Regular --> Roboto-Thin

We're almost there.

We have one more SonySketch file to deal with -- SonySketch-Italic.

Again, since we dont have thin-italic, light-italic, or medium-italic weights, we'll have to use the one SonySketch-Italic file for all of those.

Following the same copying and renaming scheme from above, we'll do this with the SonySketch-Italic file:

SonySketch-Italic --> RobotoCondensed-Italic

SonySketch-Italic --> RobotoCondensed-LightItalic

SonySketch-Italic --> RobotoCondensed-MediumItalic

SonySketch-Italic --> Roboto-Italic

SonySketch-Italic --> Roboto-LightItalic

SonySketch-Italic --> Roboto-MediumItalic

SonySketch-Italic --> Roboto-ThinItalic

That's it! We're done copying and renaming files. Now you should have all twenty stock font files replaced with your own font files.

The last things we need to do is to do the same thing with the GoogleSans-Regular.ttf file. This file is new to Android 8.0, I believe, and it is the file responsible for the clock font.

Since it's a regular font file, just make yet another copy of the SonySketch-Regular file and rename it to GoogleSans-Regular.

We're mostly done. All that's left is that we've got to fix the GoogleSans-Regular file you just made so that you don't get the square character instead of the colon in your lockscreen font.

Keep reading to learn how to do that.

Fixing the Lockscreen Clock Square Issue

Many thanks to [MENTION=5169444]AndroPlus[/MENTION] for telling me where to look to fix this file.

Tools Required:

FontForge - https://fontforge.github.io/en-US/ (it's free)

1. Run the FontForge application as administrator (this will allow you to save it to your C: drive, if you want to)

2. You only have a limited number of places to choose when you choose to open a file:

C:/

Anywhere in your user folder

The "Documents" folder

Anywhere in the "Users" folder

I work from a secondary drive called F:/Data that FontForge can't get to for some reason. So, I had to move the file I was working with to one of those locations. Just keep that in mind.

3. Find your font file, leave everything as is and click "OK" to open your font file.

4. Once the file is open, you'll notice a bunch of squares. Some will have letters, numbers, characters, or symbols in them, and some will be empty.

Each one of those squares is called a glyph.

5. Find the glyph with the colon in it. It will usually be near the top mixed in with other symbols like the coma, exclamation point, etc.

6. Once you find the colon glyph, double click on it to open it up in a separate window.

7. Next we need to find the uniEE01 glyph.

This is the glyph that the lockscreen clock font looks to to grab the colon. It's a Google specialized character. Hence, most other fonts won't have it, which is why we get the "character not found" square instead of a colon.​

8. The uniEE01 glyph is usually located nearly at the bottom of the file, although I've seen some files where it's in the middle of the file. Be patient and take your time scrolling.

A word of advice... Keep the FontForge window as small as possible. The more glyphs you can see the slower the window will respond. If you have the FontForge window maximized to the size of your monitor so that you can see a hundred or so glyphs at once, it will be a pain staking effort to scroll to the bottom of the window.​

9. Once you've found the glyph labed EE01, double click on it to open it up.

10. In your secondary window, you should now have two tabs. One will be labeled as "Colon," and the other will be labeled as uniEE01.

11. In the secondary window, ensure that the colon tab is in the foreground.

12. With the colon tab in the foreground, go to Edit from the top taskbar, then choose "Copy" from the menu.

13. Then switch to the uniEE01 tab, ensuring that the uniEE01 tab is now in the foreground.

14. With the uniEE01 tab in the foreground, go to Edit from the top taskbar, then choose "Paste."

15. Ensure that the uniEE01 tab now shows a colon.

16. Close the secondary window. There is no need to save anything form that secondary window. We will save the main file in a minute.

17. Back in the main window, ensure that the EE01 glyph now contains a colon.

18. Assuming that the ee01 glyph now contains a colon, it's time to save the file.

19. Go to File in the top taskbar.

20. From the File menu, choose "Generate Fonts..."

21. In the "Generate Fonts" dialog box:

Ensure that NO checkboxes are checked. They are not necessary for our purposes.

Ensure that the file type is set to TrueType

Choose where you want to save the file to

Set the name of the file

22. Click the "Generate" button.

23. You may receive a message that says:

24. Ignore this message, by just clicking "Yes."

25. If you had already renamed your font file to GoogleSans-Regular before you opened it, and you're naming your edited file the same thing, you will of course get a prompt telling you that the file already exists, and asking you if you want to replace it.

26. Assuming that you do want to replace the file with your newly edited file, click "Replace."

27. You're finished! You have successfully patched or fixed your font file so that you won't get the lockscreen clock square instead of a colon.

28. Add your newly edited GoogleSans-Regular file to wherever you have all of your other "custom" font files.

Putting it all Together to Make Your Flashable Zip

For the sake of keeping things easy, and because I'm tired of typing at this point, I've attached a flashable font template zip to this post.

Using this template, here's how you put together your flashable zip:

1. Unzip the template zip.

2. Place all of your now customized Roboto font files inside the /system/fonts folder.

3. Place your "fixed" GoogleSans-Regular.ttf file inside the /system/fonts folder.

4. Ensure you have 21 font files inside your /system/fonts folder (20 Roboto files and 1 GoogleSans-Regular file):

4. If you want to, edit the updater-script file to include your name and anything else you want people to see when they flash your zip. You are going to share it aren't you!? The updater-script can be found in /META-INF/com/google/android.

5. Select both the META-INF and system folders and make them a compressed zip folder:

6. Name your zip whatever you like, but be sure to include the font name in the title so other people know what it is.

7. Place the zip on your phone, boot into TWRP, and flash away!

8. You've done it! CONGRATULATIONS!