# Themes FAQ

Source: https://dev.arcxp.com/themes/themes-faq/

Themes - Developer FAQ

The following serves as guidance for developers building and maintaining their site using the Themes 2.0 design system.

As a developer using Themes, how do I... 

## Get Started on Local Development

You can use the following guides to get started on local development by configuring your feature pack and running PageBuilder Engine locally:

1. [Configure feature pack](https://dev.arcxp.com/themes/developer-docs/upgrade-to-v2-arc-blocks/#1-configure-feature-pack)
2. [Run PageBuilder Engine locally](https://dev.arcxp.com/tutorials/quick-start/set-up-your-dev-playground/)

## Access the Arc XP Blocks Repository

Click the button to go to the public blocks repository:

[ Arc XP Blocks Repository ](https://github.com/WPMedia/arc-themes-blocks) 

You can eject (fork) blocks from this repository to customize within your own bundle as needed. The [Arc XP CLI](https://www.npmjs.com/package/@arcxp/cli#arcxp-themes) offers helper commands for this.

## Set Environment Variables for Your Themes Repository

See the required [environment settings](https://dev.arcxp.com/themes/developer-docs/environment-settings/) you need to configure in the `/environment` directory of your repository.

## Add a Custom Font

You can manage fonts through the [Blocks Styling token method](https://dev.arcxp.com/themes/developer-docs/introduction-to-themes-design-system/#styling). You can set the fonts as comma-separated values within parentheses in your [alias.json](https://dev.arcxp.com/themes/developer-docs/introduction-to-themes-design-system/#feature-pack-structure) file. For example:

```json
{
  "default": {
    "font-family-primary": "('Merriweather Sans', sans-serif)"
  }
}
```

### Declare a New Font Family

Custom font files should be included in the [/resources/ directory](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/components-and-content/how-to-add-styling-to-components/). To declare a new font family:

1. Set the font family via css.
2. Load the css file via the output type.

The following sections provide examples of the contents of each file.

### fonts.css

fonts.css

```scss
@font-face {
  font-family: 'MyFont';
  src: ...; //file in resources folder or cdn url
....
```

### output-types/default.jsx

> **Note:**
> 
> If you are using a custom font that requires you to create a custom output type, you must remove the `@wpmedia/default-output-block` from your `blocks.json` when replacing with your custom output type. This avoids errors related to having redundant output types.

output-types/default.jsx

```js
import './fonts.css'
```

### alias.json

alias.json

```json
{
  "default": {
    "font-family-primary": "('MyFont', sans-serif)"
  }
}
```

## Eject (Fork) a Block

For full details on ejecting a Themes block as a starter for your custom needs, see [Ejecting (Forking) an Arc XP block](https://dev.arcxp.com/themes/developer-docs/ejecting-an-arc-block/).

## Use Block Styling on Custom Blocks

For full details on applying Themes 2.0 block styling capabilities to custom blocks, see [Creating a Custom Block with Styling](https://dev.arcxp.com/themes/developer-docs/creating-a-custom-block-with-styling/).

## Update Blocks for AMP Compatibility

Due to the updates in the [page experience ranking](https://developers.google.com/search/blog/2021/04/more-details-page-experience#details) by Google, [AMP](https://developers.google.com/amp) is not supported out-of-the-box on Arc XP components, blocks, and pages. You may build a custom block to your specific requirements and will need to create a custom [output type](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/components-and-content/how-to-create-and-use-output-types) to meet the [AMP HTML specification](https://amp.dev/documentation/guides-and-tutorials/websites/learn/spec/amphtml).

For more details, see [PageBuilder Engine Best Practices: AMP](https://dev.arcxp.com/pagebuilder-engine/developer-docs/pagebuilder-engine-best-practices/#amp).

## Internationalize Your Site

For full details on Themes supported languages and site properties, see [Internationalization](https://dev.arcxp.com/pagebuilder-engine/developer-docs/internationalization/).

## Set Site Properties

To set site properties in your bundle, see [How to deploy a bundle](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/optimization-and-deployment/how-to-deploy-a-bundle/#blocksjson)

For more information about site properties that are not supported out-of-the-box, see:

- [How to use site properties](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/basics/how-to-use-site-properties/)
- [Site Properties - Definition and Use](https://dev.arcxp.com/pagebuilder-engine/developer-docs/site-properties/)

## Add or Remove Blocks from Your Bundle

You can add or remove blocks from your bundle by changing your `blocks.json` file of your [feature pack](https://dev.arcxp.com/themes/developer-docs/introduction-to-themes-design-system/#feature-pack-structure).

## Complete a Deployment

To complete a deployment using PageBuilder Deployer, see [How to deploy a bundle](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/optimization-and-deployment/how-to-deploy-a-bundle/). The [Arc XP CLI](https://www.npmjs.com/package/@arcxp/cli#arcxp-pagebuilder) has helper commands to compile styles, upload and deploy bundles.