mirror of
https://github.com/google/pebble.git
synced 2025-03-19 10:31:21 +00:00
194 lines
6.7 KiB
Markdown
194 lines
6.7 KiB
Markdown
|
---
|
||
|
# 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.
|
||
|
|
||
|
title: System Fonts
|
||
|
description: |
|
||
|
A complete list of all the system fonts available for use in Pebble projects.
|
||
|
guide_group: app-resources
|
||
|
order: 8
|
||
|
---
|
||
|
|
||
|
The tables below show all the system font identifiers available in the Pebble
|
||
|
SDK, sorted by family. A sample of each is also shown.
|
||
|
|
||
|
## Available System Fonts
|
||
|
|
||
|
### Raster Gothic
|
||
|
|
||
|
<table>
|
||
|
<thead>
|
||
|
<th>Available Font Keys</th>
|
||
|
<th>Preview</th>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_14</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_14_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_14_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_14_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_18</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_18_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_18_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_18_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_24</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_24_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_24_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_24_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_28</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_28_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_GOTHIC_28_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/gothic_28_bold_preview.png"/></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
### Bitham
|
||
|
|
||
|
<table>
|
||
|
<thead>
|
||
|
<th>Available Font Keys</th>
|
||
|
<th>Preview</th>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><code>FONT_KEY_BITHAM_30_BLACK</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/bitham_30_black_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_BITHAM_34_MEDIUM_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/bitham_34_medium_numbers_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_BITHAM_42_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_BITHAM_42_LIGHT</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_light_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_BITHAM_42_MEDIUM_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/bitham_42_medium_numbers_preview.png"/></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
### Roboto/Droid Serif
|
||
|
|
||
|
<table>
|
||
|
<thead>
|
||
|
<th>Available Font Keys</th>
|
||
|
<th>Preview</th>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><code>FONT_KEY_ROBOTO_CONDENSED_21</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/roboto_21_condensed_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_ROBOTO_BOLD_SUBSET_49</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/roboto_49_bold_subset_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_DROID_SERIF_28_BOLD</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/droid_28_bold_preview.png"/></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
### LECO
|
||
|
|
||
|
<table>
|
||
|
<thead>
|
||
|
<th>Available Font Keys</th>
|
||
|
<th>Preview</th>
|
||
|
</thead>
|
||
|
<tbody>
|
||
|
<tr>
|
||
|
<td><code>FONT_KEY_LECO_20_BOLD_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_20_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_26_BOLD_NUMBERS_AM_PM</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_26_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_28_LIGHT_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_28_light_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_32_BOLD_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_32_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_36_BOLD_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_36_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_38_BOLD_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_38_bold_preview.png"/></td>
|
||
|
</tr><tr>
|
||
|
<td><code>FONT_KEY_LECO_42_NUMBERS</code></td>
|
||
|
<td><img src="/assets/images/guides/app-resources/fonts/leco_42_preview.png"/></td>
|
||
|
</tr>
|
||
|
</tbody>
|
||
|
</table>
|
||
|
|
||
|
|
||
|
## Obtaining System Font Files
|
||
|
|
||
|
The following system fonts are available to developers in the SDK can be found
|
||
|
online for use in design mockups:
|
||
|
|
||
|
* [Raster Gothic](http://www.marksimonson.com/) - By Mark Simonson
|
||
|
|
||
|
* [Gotham (Bitham)](http://www.typography.com/fonts/gotham/overview/) -
|
||
|
Available from Typography.com
|
||
|
|
||
|
* [Droid Serif](https://www.google.com/fonts/specimen/Droid+Serif) - Available
|
||
|
from Google Fonts
|
||
|
|
||
|
* [LECO 1976](https://www.myfonts.com/fonts/carnoky/leco-1976/) - Available from
|
||
|
Myfonts.com
|
||
|
|
||
|
|
||
|
## Using Emoji Fonts
|
||
|
|
||
|
A subset of the built-in system fonts support the use of a set of emoji
|
||
|
characters. These are the Gothic 24, Gothic 24 Bold, Gothic 18, and Gothic 18
|
||
|
Bold fonts, but do not include the full range.
|
||
|
|
||
|
To print an emoji on Pebble, specify the code in a character string like the one
|
||
|
shown below when using a ``TextLayer``, or ``graphics_draw_text()``:
|
||
|
|
||
|
```c
|
||
|
text_layer_set_text(s_layer, "Smiley face: \U0001F603");
|
||
|
```
|
||
|
|
||
|
An app containing a ``TextLayer`` displaying the above string will look similar
|
||
|
to this:
|
||
|
|
||
|

|
||
|
|
||
|
The supported characters are displayed below with their corresponding unicode
|
||
|
values.
|
||
|
|
||
|
<img style="align: center;" src="/assets/images/guides/pebble-apps/resources/emoji1.png"/>
|
||
|
|
||
|
### Deprecated Emoji Symbols
|
||
|
|
||
|
The following emoji characters are no longer available on the Aplite platform.
|
||
|
|
||
|
<img style="align: center;" src="/assets/images/guides/pebble-apps/resources/emoji-unsupported.png"/>
|