Using freetype-gl to render fonts but seemingly only getting the quads vertices and about 1/4 of the text

Question

I am trying to create my own low-level game engine using OpenGL, freetype-gl and a few other dependencies. Been struggling with rendering fonts for quite a while.

This is the current result I am getting. You can see the corner of the "2" in my fps counter:

I believe the black squares are the quads of the fonts, but I do not know why I am seeing those at all, as well as only the small bit of the "2" being shown.

Here you can see the result of The Chernos Sparky engine with I am following loosely, and trying to achieve:

Obviously that tutorial is 8 years old, so things have changed quite a bit. For example I have to bind the texture myself and so on.

I have tried using the freetype-gl library directly ripped from the GitHub of Chernos Sparky engine, but there are some incompatibilities as I am using Ubuntu, and there is quite a bit of Windows specific code, so I have opted for using current day freetype-gl.

Below is what I think the relevant code is.

This is in my renderers init function. If I had to guess this is where I am going wrong.

m_FTAtlas = ftgl::texture_atlas_new(512, 512, 2);
m_FTFont = ftgl::texture_font_new_from_file(m_FTAtlas, 32, "arial.ttf");
ftgl::texture_font_load_glyphs(m_FTFont, "2");
// glEnable(GL_BLEND); Tried enabling blend, makes no difference
glGenTextures(1, &m_FTAtlas->id);
glBindTexture(GL_TEXTURE_2D, m_FTAtlas->id);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, m_FTAtlas->width, m_FTAtlas->height, 0, GL_RED, GL_UNSIGNED_BYTE, m_FTAtlas->data);
ftgl::texture_font_get_glyph(m_FTFont, "f");

Here is the actual drawString method:

void BatchRenderer2D::drawString(const std::string& text, const math::vec3& position, const math::vec4& color)
{
    using namespace ftgl;
    
    int r = color.x * 255.0f;
    int g = color.y * 255.0f;
    int b = color.z * 255.0f;
    int a = color.w * 255.0f;
    
    unsigned int col = a << 24 | b << 16 | g << 8 | r;
    
    float ts = 0.0f;
    bool found = false;
    for (int i = 0; i < m_TextureSlots.size(); i++)
    {
        if (m_TextureSlots[i] == m_FTAtlas->id)
        {
            ts = (float)(i + 1);
            found = true;
            break;
        }
    }
    
    if (!found)
    {
        if (m_TextureSlots.size() >= 32)
        {
            end();
            flush();
            begin();
        }
        m_TextureSlots.push_back(m_FTAtlas->id);
        ts = (float)(m_TextureSlots.size());
    }
    
    float scaleX = 960.0f / 32.0f;
    float scaleY = 540.0f / 18.0f;
    
    float x = position.x;
    
    for (int i = 0; i < text.length(); i++)
    {
        char c = text[i];
        texture_glyph_t* glyph = texture_font_get_glyph(m_FTFont, &c);
        if (glyph != NULL)
        {
           if (i > 0)
{
    float kerning = texture_glyph_get_kerning(glyph, &text[i - 1]);
    x += kerning / scaleX;
}

float x0 = x + glyph->offset_x / scaleX;
float y0 = position.y + glyph->offset_y / scaleY;
float x1 = x0 + glyph->width / scaleX;
float y1 = y0 - glyph->height / scaleY;

float u0 = glyph->s0;
float v0 = glyph->t0;
float u1 = glyph->s1;
float v1 = glyph->t1;

m_Buffer->vertex = *m_TransformationBack * math::vec3(x0, y0, 0);
m_Buffer->uv = math::vec2(u0, v0);
m_Buffer->textureID = ts;
m_Buffer->color = col;
m_Buffer++;

m_Buffer->vertex = *m_TransformationBack * math::vec3(x0, y1, 0);
m_Buffer->uv = math::vec2(u0, v1);
m_Buffer->textureID = ts;
m_Buffer->color = col;
m_Buffer++;

m_Buffer->vertex = *m_TransformationBack * math::vec3(x1, y1, 0);
m_Buffer->uv = math::vec2(u1, v1);
m_Buffer->textureID = ts;
m_Buffer->color = col;
m_Buffer++;

m_Buffer->vertex = *m_TransformationBack * math::vec3(x1, y0, 0);
m_Buffer->uv = math::vec2(u1, v0);
m_Buffer->textureID = ts;
m_Buffer->color = col;
m_Buffer++;

m_IndexCount += 6;

x += glyph->advance_x / scaleX;
  }
 }
}

Right after I initialize glad I enable glBlend:

glEnable(GL_BLEND);                                                                                                                                                                                                                    
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

This is my fragment shader:

#version 330 core

layout (location = 0) out vec4 color;

uniform vec4 colour;
uniform vec2 light_pos;

in DATA
{
    vec4 position;
    vec2 uv;
    float tid;
    vec4 color;
} fs_in;

uniform sampler2D textures[32];

void main()
{
    float intensity = 1.0 / length(fs_in.position.xy - light_pos);
    vec4 texColor = fs_in.color;

// texColor = texture(textures[tid], fs_in.uv); GIVES ERROR SO UGLY SWITCH INSTEAD


    if (fs_in.tid > 0.0) {
        int tid = int(fs_in.tid - 0.5);
        switch (tid) {
            case 0:
                texColor = fs_in.color * texture(textures[0], fs_in.uv);
                break;
            case 1:
                texColor = fs_in.color * texture(textures[1], fs_in.uv);
                break;
            case 2:
                texColor = fs_in.color * texture(textures[2], fs_in.uv);
                break;
            case 3:
                texColor = fs_in.color * texture(textures[3], fs_in.uv);
                break;
            // Continue this pattern until 31
            case 30:
               texColor = fs_in.color * texture(textures[30], fs_in.uv);
               break;
            case 31:
               texColor = fs_in.color * texture(textures[31], fs_in.uv);
               break;
            default:
               break;
    }
}
color = texColor; //* intensity;     
}

Rendering fonts have turned out the be an actual nightmare.