Google Fonts

Components Template to build out other pages

Inter

EB Garamond

Cursive

Poppins

Sans Serif

Roboto

Playfair Display

Serif

Raleway

Fantasy

Montserrat

Nunito

Roboto Condensed

Outfit

Stix Two Text

Monospace

Lexend

Home

/

Snippets

/

Components

/

Google Fonts

Inter

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Inter

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100


Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Inter

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Inter

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Inter

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Inter

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                  

1



                                

Roboto

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Roboto

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Montserrat

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Montserrat

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Poppins

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Poppins

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Outfit

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Outfit

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Stix Two Text

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Stix Two Text

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Playfair Display

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Playfair Display

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Raleway

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Raleway

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Nunito

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Nunito

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

EB Garamond

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

EB Garamond

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Lexend

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Lexend

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Roboto Condensed

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Roboto Condensed

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Serif

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Serif

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Sans Serif

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Sans Serif

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Monospace

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Monospace

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Fantasy

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Fantasy

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1



                              

Cursive

Use .btn as the base, then add .pt-btn-outline-* for outline color, .pt-btn-(size)-(width) for sizing, and .pt-round-* for rounded corners.

Cursive

AaBbCcDdEeFf 1234567890`!@#$%^&*()_+

Black 900

/

Extra Bold 800

/

Bold 700

/

Semi Bold 600

/

Medium 500

/

Regular 400

/

Light 300

/

Extra Light 200

/

Thin 100

Elements

Font Size

Font Weight


Heading 2

60px

600


Heading 3

45px

600


Heading 4

35px

600


Heading 5
28px
500

Heading 6
22px
500

Paragraph

18px

500


Caption

16px

500

Amet Consectetur

Lorem Ipsum Dolor Set

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.

Button 1 Button 2

1



                                

1