> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CheckoutAppearance

> Swift Structure

**Structure**

The visual customization of `CrossmintEmbeddedCheckout`.

```swift theme={null}
struct CheckoutAppearance
```

Set `fonts` to load custom fonts. Set `variables` for the base look of the checkout. Set `rules` to change single elements. A rule has priority over a variable.

```swift theme={null}
let appearance = CheckoutAppearance(
    fonts: [.googleFonts("Inter", weights: [.regular, .semibold])],
    variables: CheckoutAppearanceVariables(
        fontFamily: "Inter, sans-serif",
        colors: CheckoutVariablesColorStyle(accent: "#0066FF")
    ),
    rules: CheckoutAppearanceRules(
        primaryButton: CheckoutPrimaryButtonRule(
            borderRadius: "12px",
            font: CheckoutFontStyle(size: .px(17), weight: .semibold)
        )
    )
)
```

## Initializers

### init(fonts:variables:rules:)

Creates an appearance.

```swift theme={null}
init(fonts: [CheckoutFontSource]? = nil, variables: CheckoutAppearanceVariables? = nil, rules: CheckoutAppearanceRules? = nil)
```

### init(from:)

Inherited from `Decodable.init(from:)`.

```swift theme={null}
init(from decoder: any Decoder) throws
```

## Instance Properties

| Property | Type | Description |
| - | - | - |
| `fonts` | `[CheckoutFontSource]?` | The stylesheets that load custom fonts into the checkout. |
| `rules` | `CheckoutAppearanceRules?` | The per-element style overrides. |
| `variables` | `CheckoutAppearanceVariables?` | The global style variables. |