Landing

Pricing

Our Team

Home

Changing Typography

In this section, we will learn about changing the typography of Midnight-rush.

Midnight-rush uses fastn default typography. If you wish to update it.

fastn Typography collection:

Choose a typography or font of your choice from our fastn-community. Click here to search.

How to add a typography?

To add typography to your fastn web sites. Edit your FASTN.ftd file and add typography dependency into it.

In the below example we are using https://fastn-community.github.io/Midnight-rush-typography/ typography.

Add typography dependency into your FASTN.ftd file as shown in below example:

-- fastn.dependency: fastn-community.github.io/Midnight-rush
-- fastn.dependency: fastn-community.github.io/Midnight-rush-typography

Lang:

ftd

How to create a global `ds` page module for `Midnight-rush`?

You can create a ds.ftd module inside your fastn package and create your custom ds page component.

Let’s learn how to create a module:

Create a new file let’s say ds.ftd.

Here’s what your ds.ftd module would look like:

ds.ftd module

-- import: fastn-community.github.io/Midnight-rush as ds
-- import: fastn-community.github.io/Midnight-rush-typography

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
types: $Midnight-rush-typography.types

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

ds.ftd

Lang:

ftd

Click on the download icon of the above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.

Then use the ds component to create a new page using it.

-- import: fastn-community.github.io/Midnight-rush as ds
-- import: <your fastn package name>/ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

typography.ftd

Lang:

ftd

Click on the download icon of the above code-block. typography.ftd file will be downloaded.

Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/typography/ you will see page text with Midnight-rush-typography font sizes in Lato and Source-Code-Pro font.

fastn Typography collection:

How to add typography?

How to create a global ds page module for Midnight-rush?

Changing Typography

In this section, we will learn about changing the typography of Midnight-rush.

Midnight-rush uses fastn default typography. If you wish to update it.

fastn Typography collection:

Choose a typography or font of your choice from our fastn-community. Click here to search.

How to add a typography?

To add typography to your fastn web sites. Edit your FASTN.ftd file and add typography dependency into it.

In the below example we are using https://fastn-community.github.io/Midnight-rush-typography/ typography.

Add typography dependency into your FASTN.ftd file as shown in below example:

-- fastn.dependency: fastn-community.github.io/Midnight-rush
-- fastn.dependency: fastn-community.github.io/Midnight-rush-typography

Lang:

ftd

How to create a global `ds` page module for `Midnight-rush`?

You can create a ds.ftd module inside your fastn package and create your custom ds page component.

Let’s learn how to create a module:

Create a new file let’s say ds.ftd.

Here’s what your ds.ftd module would look like:

ds.ftd module

-- import: fastn-community.github.io/Midnight-rush as ds
-- import: fastn-community.github.io/Midnight-rush-typography

-- component page:
children wrapper:
optional caption title:
optional body body:
boolean sidebar: false

-- ds.page: $page.title
site-logo: $fastn-assets.files.images.fastn.svg
body: $page.body
sidebar: $page.sidebar
types: $Midnight-rush-typography.types

-- end: ds.page.banner

-- ds.page.extra-headers:

-- ds.h3: Heading in sidebar

`<You can add any component like this inside sidebar.>`

-- end: ds.page.extra-headers

-- ftd.column:
spacing.fixed.em: 0.8
width: fill-container
children: $page.wrapper

-- end: ftd.column

-- end: ds.page

-- end: page

ds.ftd

Lang:

ftd

Click on the download icon of the above code-block. ds.ftd file will be downloaded. Import this file inside your new .ftd file.

Then use the ds component to create a new page using it.

-- import: fastn-community.github.io/Midnight-rush as ds
-- import: <your fastn package name>/ds

-- ds.page: This is page title

This is body area. It contains multiple paragraphs.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
praesentium voluptatum.

-- ds.h1: This is heading level 1

This is heading level 1 optional body content.

-- ds.h2: This is heading level 2

This is heading level 2 optional body content.

-- ds.h3: This is heading level 3

This is heading level 3 optional body content.

-- end: ds.page

typography.ftd

Lang:

ftd

Click on the download icon of the above code-block. typography.ftd file will be downloaded.

Add this file inside your fastn project and deploy or run fastn serve on your localhost. Access your localhost in the browser e.g.http://127.0.0.1:8000/typography/ you will see page text with Midnight-rush-typography font sizes in Lato and Source-Code-Pro font.

Stay in touch with everything you need