Basics

Ever wished you could change fonts in your app as easily as picking a new pen? That’s exactly what font tags do in Rhyme! They’re like friendly nicknames for fonts that make your text look exactly how you want it.

What Are Font Tags?

Font tags are special markers in Rhyme that start with a ^ symbol (we call it a “caret”). Think of them as labels you stick on fonts so you can use them anywhere in your app. Instead of typing out long, complicated font names every time, you create a short tag once and use it everywhere.

How Font Tags Work

Here’s the simple two-step process:

Step 1: Define Your Font Tag

font ^mycoolfont google "Dancing Script"

This tells Rhyme: “Hey, whenever I say ^mycoolfont, I mean the Dancing Script font from Google Fonts!”

Step 2: Use Your Font Tag

.text "Welcome to my app!" ^mycoolfont

Now your welcome message appears in that beautiful Dancing Script font!

Real-World Example

Let’s say you’re building a website with different fonts for headings and body text:

font ^heading google "Bebas Neue"
font ^body google "Open Sans"

.text "Our Amazing Products" ^heading #navy
.text "We create solutions that make your life easier" ^body

Working with Google Fonts

The most common way to use font tags is with Google Fonts, which gives you access to thousands of professional fonts:

font ^modern google "Poppins"
font ^classic google "Playfair Display"
font ^fun google "Pacifico"

Just use the exact font name as it appears on Google Fonts.

Multiple Font Weights

Some fonts come in different weights (thin, regular, bold, etc.). You can specify these too:

font ^light google "Roboto:300"
font ^regular google "Roboto:400"
font ^bold google "Roboto:700"

Why Font Tags Are Awesome

Easy to Remember

^heading is much easier than remembering “Bebas Neue”

Change Once, Update Everywhere

Want a different heading font? Just change the font definition, and every ^heading in your app updates automatically

Mix and Match

Use different fonts for different parts of your app without any hassle

Google Fonts Built In

Access thousands of professional fonts with a simple name

Best Practices

1. Define fonts early - Put your font definitions in the [init] or [start] block
2. Use descriptive names - ^heading is clearer than ^font1
3. Be consistent - Use the same font tags throughout your app
4. Don’t overdo it - 2-3 fonts are usually enough for most apps

Font tags are one of those simple features that make building in Rhyme feel natural and fun. No more copying and pasting long font names or worrying about typos – just tag it and go!