diff --git a/assets/lato-light - Copy.png b/assets/lato-light - Copy.png
deleted file mode 100644
index 103c6324efec5ccfef51aab02cde1afb0d7895ae..0000000000000000000000000000000000000000
Binary files a/assets/lato-light - Copy.png and /dev/null differ
diff --git a/assets/lato-light.kttf b/assets/lato-light.kttf
new file mode 100644
index 0000000000000000000000000000000000000000..15e547e1171fc26bd38cfd25279144307481d46c
--- /dev/null
+++ b/assets/lato-light.kttf
@@ -0,0 +1,5 @@
+{
+    "file": "lato-light.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
\ No newline at end of file
diff --git a/assets/lato-light.kttf-cached.png b/assets/lato-light.kttf-cached.png
new file mode 100644
index 0000000000000000000000000000000000000000..9cec7f72d026cb867b02cba99b0ffa9129c52187
Binary files /dev/null and b/assets/lato-light.kttf-cached.png differ
diff --git a/assets/lato-light.ttf b/assets/lato-light.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..dfa72ce808fbb783042da88ce1bae5d9adb54fb6
Binary files /dev/null and b/assets/lato-light.ttf differ
diff --git a/assets/roboto.kttf b/assets/roboto.kttf
new file mode 100644
index 0000000000000000000000000000000000000000..9c7d59c6ed7f1c15a4d89b38b98ae946f470213b
--- /dev/null
+++ b/assets/roboto.kttf
@@ -0,0 +1,5 @@
+{
+    "file": "roboto.ttf",
+    "char_range_start": "0x20",
+    "char_range_end": "0x7f"
+}
\ No newline at end of file
diff --git a/kayak_font/assets/roboto.kttf-cached.png b/assets/roboto.kttf-cached.png
similarity index 100%
rename from kayak_font/assets/roboto.kttf-cached.png
rename to assets/roboto.kttf-cached.png
diff --git a/assets/roboto.ttf b/assets/roboto.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..2b6392ffe8712b9c5450733320cd220d6c0f4bce
Binary files /dev/null and b/assets/roboto.ttf differ
diff --git a/examples/clipping.rs b/examples/clipping.rs
index ee5a3032f5133edca1ad952381d1f22f4c866f88..322a0ed2c81f869f3a28dbd20973c23d17364c09 100644
--- a/examples/clipping.rs
+++ b/examples/clipping.rs
@@ -6,7 +6,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     let image = asset_server.load("panel.png");
 
diff --git a/examples/conditional_widget.rs b/examples/conditional_widget.rs
index b668f17ce4655b6706002df9a4dcf201fb0b84fb..6c652ac76a6dabbbd7a2c6c4f0de094dd7602de0 100644
--- a/examples/conditional_widget.rs
+++ b/examples/conditional_widget.rs
@@ -109,7 +109,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     // Camera 2D forces a clear pass in bevy.
     // We do this because our scene is not rendering anything else.
diff --git a/examples/main_menu.rs b/examples/main_menu.rs
index a1ec90cd1e51d239f9b45a14e9249b9db4031f24..467dc38ede2ef83a8c22635cd8627f436d084d9c 100644
--- a/examples/main_menu.rs
+++ b/examples/main_menu.rs
@@ -96,8 +96,9 @@ fn menu_button_render(
                         content: button_text,
                         size: 28.0,
                         user_styles: KStyle {
-                            top: Units::Stretch(1.0).into(),
-                            bottom: Units::Stretch(1.0).into(),
+                            // top: Units::Stretch(1.0).into(),
+                            top: Units::Pixels(-16.0).into(),
+                            height: Units::Pixels(40.0).into(),
                             ..Default::default()
                         },
                         ..Default::default()
@@ -120,7 +121,7 @@ fn startup(
     asset_server: Res<AssetServer>,
     mut preload_resource: ResMut<PreloadResource>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     let mut widget_context = KayakRootContext::new();
     widget_context.add_plugin(KayakWidgetsContextPlugin);
diff --git a/examples/simple_state.rs b/examples/simple_state.rs
index 0e2e8e2d0768e06dae6320fd45dca1b90bb6e389..0042d2684a05abd4977c1d00e391772e94a734cc 100644
--- a/examples/simple_state.rs
+++ b/examples/simple_state.rs
@@ -83,7 +83,7 @@ fn startup(
     mut font_mapping: ResMut<FontMapping>,
     asset_server: Res<AssetServer>,
 ) {
-    font_mapping.set_default(asset_server.load("lato-light.kayak_font"));
+    font_mapping.set_default(asset_server.load("lato-light.kttf"));
 
     // Camera 2D forces a clear pass in bevy.
     // We do this because our scene is not rendering anything else.
diff --git a/kayak_font/src/ttf/loader.rs b/kayak_font/src/ttf/loader.rs
index 81080d691315a56db76c6f604a7f77f87ffde059..0a12a7f07846436cc1dcc5701c745de848a5a192 100644
--- a/kayak_font/src/ttf/loader.rs
+++ b/kayak_font/src/ttf/loader.rs
@@ -142,7 +142,7 @@ impl AssetLoader for TTFLoader {
                     // let top = (translation.y - char_bounds.y_min as f64 * pixel_scale).max(0.0).floor() as u32;
                     let bottom = (translation.y + char_bounds.y_max as f64 * pixel_scale).floor() as u32;
             
-                    for x in 0..right + 2 {
+                    for x in 0..(right + 2).min(64) {
                         for y in 0..bottom + 48 {
                     // for x in 0..size_x as u32 {
                     //     for y  in 0..size_y as u32 {
@@ -278,7 +278,7 @@ fn calculate_plane(
             left: 0.0,   // l as f32,
             bottom: 0.0, // b as f32,
             right: 0.0,  // r as f32,
-            top: 4.0 * geometry_scale,    // t as f32,
+            top: 24.0 * geometry_scale,    // t as f32,
         },
     )
 }