--- # Copyright 2025 Google LLC # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. author: thomas tags: - Beautiful Code --- _(2014 09: This article was updated to add links for SDK 2.0 users and add the resource identifier of the fonts as suggested by Timothy Gray in the comments.)_ Just like any modern platform, typography is a very important element of Pebble user interface. As Designers and Developers, you have the choice to use one of Pebble system fonts or to embed your own. Pebble system fonts were chosen for their readability and excellent quality on Pebble black & white display, it's a good idea to know them well before choosing to embed your own. ## Using Pebble system fonts To use one of the system font, you need to call `fonts_get_system_font()` and pass it the name of a system font. Those are defined in `pebble_fonts.h` in the `include` directory of your project. This function returns a `GFont` object that you can use with `text_layer_set_text()` and `graphics_text_draw()`. For example, in our Hello World example we used the _Roboto Condensed 21_ font: ```c void handle_init(AppContextRef ctx) { window_init(&window, "Window Name"); window_stack_push(&window, true /* Animated */); text_layer_init(&hello_layer, GRect(0, 65, 144, 30)); text_layer_set_text_alignment(&hello_layer, GTextAlignmentCenter); text_layer_set_text(&hello_layer, "Hello World!"); text_layer_set_font(&hello_layer, fonts_get_system_font(FONT_KEY_ROBOTO_CONDENSED_21)); layer_add_child(&window.layer, &hello_layer.layer); } ``` > **Update for SDK 2 users**: > > Refer to the [second part of the watchface tutorial](/getting-started/watchface-tutorial/part2/) for updated sample code. ## An illustrated list of Pebble system fonts {% alert notice %} A more up-to-date list of fonts can be found by reading {% guide_link app-resources/system-fonts %} in the developer guides. {% endalert %} To facilitate your choice, here is a series of screenshot of Pebble system fonts used to display digits and some text. {% comment %}HTML below is acceptable according to Matthew{% endcomment %}
Gothic 14 | ![]() |
![]() |
Gothic 14 Bold | ![]() |
![]() |
Gothic 18 | ![]() |
![]() |
Gothic 18 Bold | ![]() |
![]() |
Gothic 24 | ![]() |
![]() |
Gothic 24 Bold | ![]() |
![]() |
Gothic 28 | ![]() |
![]() |
Gothic 28 Bold | ![]() |
![]() |
Bitham 30 Black | ![]() |
![]() |
Bitham 42 Bold | ![]() |
![]() |
Bitham 42 Light | ![]() |
![]() |
Bitham 34 Medium Numbers | ![]() |
|
Bitham 42 Medium Numbers | ![]() |
|
Roboto 21 Condensed | ![]() |
![]() |
Roboto 49 Bold Subset | ![]() |
|
Droid 28 Bold | ![]() |
![]() |