Pro Fonts



Pro Fonts are a GitPitch Pro subscriber only feature.

By default, the font used to render text on your slides is determined by the font-family style rule set by the fixed theme active for your presentation.

Pro Fonts deliver new and beautiful typographic options for presentation authors. And thanks to a little bit of GitPitch magic, Pro Fonts work flawlessly whether you are sharing your slideshow content online or presenting offline.

PRO-FONTS

Click on the above image to take a live, interactive tour of Pro Fonts in your browser.


1. Pro Fonts Benefits

Pro Fonts deliver the following benefits for presentation authors:

  • Pro Fonts are a selection of the most popular Google Web Fonts
  • Delivering beautiful typographic options for any presentation
  • Pro Fonts are open-source and 100% free for commercial use
  • Multiple fonts can be activated for any presentation
  • Normal, medium, and heavy weights are available for each font
  • Fonts can be activated for selected text on specific slides
  • And fonts can be activated globally for all text within a presentation

Beyond the typographic benefits for GitPitch presentation authors you also benefit from consistent, reliable slideshow rendering online, offline, and when printing to PDF.



2. Pro Fonts Activation

Selected Pro Fonts can be activated for any presentation using a small snippet of custom css that loads and registers the font for use within your PITCHME.md markdown.

The following sections provide CSS snippets for each Pro Font. You can copy and paste the snippets provided into your own custom PITCHME.css.



3. Pro Fonts - Roboto

The following sample slide demonstrates the use of the Roboto font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-ROBOTO

This sample slide was rendered using the following markdown snippet:

---?color=#F79F79

@snap[north-west roboto-heavy]
# GitPitch
@snapend

@snap[west roboto text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west roboto-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Roboto font use the following custom CSS:


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/roboto-normal.woff2') format('woff2'),
       url('/assets/fonts/roboto-normal.woff') format('woff');
}

.roboto,
.roboto * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Roboto", sans-serif !important;
}

To activate the Roboto Medium font use the following custom CSS:


@font-face {
  font-family: 'Roboto Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/roboto-medium.woff2') format('woff2'),
       url('/assets/fonts/roboto-medium.woff') format('woff');
}

.roboto-medium,
.roboto-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Roboto Medium", sans-serif !important;
}

To activate the Roboto Heavy font use the following custom CSS:


@font-face {
  font-family: 'Roboto Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/roboto-heavy.woff2') format('woff2'),
       url('/assets/fonts/roboto-heavy.woff') format('woff');
}

.roboto-heavy,
.roboto-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Roboto Bold", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



4. Pro Fonts - Open Sans

The following sample slide demonstrates the use of the Open Sans font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-OPEN-SANS

This sample slide was rendered using the following markdown snippet:

---?color=#F7D08A

@snap[north-west open-sans-heavy]
# GitPitch
@snapend

@snap[west open-sans text-gray]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west open-sans-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Open Sans font use the following custom CSS:


@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/open-sans-normal.woff2') format('woff2'),
       url('/assets/fonts/open-sans-normal.woff') format('woff');
}

.open-sans,
.open-sans * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Open Sans", sans-serif !important;
}

To activate the Open Sans Medium font use the following custom CSS:


@font-face {
  font-family: 'Open Sans Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/open-sans-medium.woff2') format('woff2'),
       url('/assets/fonts/open-sans-medium.woff') format('woff');
}

.open-sans-medium,
.open-sans-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Open Sans Medium", sans-serif !important;
}

To activate the Open Sans Heavy font use the following custom CSS:


@font-face {
  font-family: 'Open Sans Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/open-sans-heavy.woff2') format('woff2'),
       url('/assets/fonts/open-sans-heavy.woff') format('woff');
}

.open-sans-heavy,
.open-sans-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Open Sans Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



5. Pro Fonts - Lato

The following sample slide demonstrates the use of the Lato font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-LATO

This sample slide was rendered using the following markdown snippet:

---?color=#87B6A7

@snap[north-west lato-heavy]
# GitPitch
@snapend

@snap[west lato text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west lato-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Lato font use the following custom CSS:


@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/lato-normal.woff2') format('woff2'),
       url('/assets/fonts/lato-normal.woff') format('woff');
}

.lato,
.lato * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Lato", sans-serif !important;
}

To activate the Lato Medium font use the following custom CSS:


@font-face {
  font-family: 'Lato Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/lato-medium.woff2') format('woff2'),
       url('/assets/fonts/lato-medium.woff') format('woff');
}

.lato-medium,
.lato-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Lato Medium", sans-serif !important;
}

To activate the Lato Heavy font use the following custom CSS:


@font-face {
  font-family: 'Lato Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/lato-heavy.woff2') format('woff2'),
       url('/assets/fonts/lato-heavy.woff') format('woff');
}

.lato-heavy,
.lato-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Lato Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



6. Pro Fonts - Montserrat

The following sample slide demonstrates the use of the Montserrat font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-MONTSERRAT

This sample slide was rendered using the following markdown snippet:

---?color=#F79F79

@snap[north-west montserrat-heavy]
# GitPitch
@snapend

@snap[west montserrat text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west montserrat-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Montserrat font use the following custom CSS:


@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/montserrat-normal.woff2') format('woff2'),
       url('/assets/fonts/montserrat-normal.woff') format('woff');
}

.montserrat,
.montserrat * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Montserrat", sans-serif !important;
}

To activate the Montserrat Medium font at use the following custom CSS:


@font-face {
  font-family: 'Montserrat Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/montserrat-medium.woff2') format('woff2'),
       url('/assets/fonts/montserrat-medium.woff') format('woff');
}

.montserrat-medium,
.montserrat-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Montserrat Medium", sans-serif !important;
}

To activate the Montserrat Heavy font use the following custom CSS:


@font-face {
  font-family: 'Montserrat Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/montserrat-heavy.woff2') format('woff2'),
       url('/assets/fonts/montserrat-heavy.woff') format('woff');
}

.montserrat-heavy,
.montserrat-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Montserrat Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



7. Pro Fonts - Oswald

The following sample slide demonstrates the use of the Oswald font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-OSWALD

This sample slide was rendered using the following markdown snippet:

---?color=#F7D08A

@snap[north-west oswald-heavy]
# GitPitch
@snapend

@snap[west oswald text-gray]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west oswald-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Oswald font use the following custom CSS:


@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/oswald-normal.woff2') format('woff2'),
       url('/assets/fonts/oswald-normal.woff') format('woff');
}

.oswald,
.oswald * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Oswald", sans-serif !important;
}

To activate the Oswald Medium font use the following custom CSS:


@font-face {
  font-family: 'Oswald Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/oswald-medium.woff2') format('woff2'),
       url('/assets/fonts/oswald-medium.woff') format('woff');
}

.oswald-medium,
.oswald-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Oswald Medium", sans-serif !important;
}

To activate the Oswald Heavy font use the following custom CSS:


@font-face {
  font-family: 'Oswald Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/oswald-heavy.woff2') format('woff2'),
       url('/assets/fonts/oswald-heavy.woff') format('woff');
}

.oswald-heavy,
.oswald-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Oswald Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



8. Pro Fonts - Source Sans Pro

The following sample slide demonstrates the use of the Source Sans Pro font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-SOURCE-SANS-PRO

This sample slide was rendered using the following markdown snippet:

---?color=#87B6A7

@snap[north-west source-sans-pro-heavy]
# GitPitch
@snapend

@snap[west source-sans-pro text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west source-sans-pro-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Source Sans Pro font use the following custom CSS:


@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/source-sans-pro-normal.woff2') format('woff2'),
       url('/assets/fonts/source-sans-pro-normal.woff') format('woff');
}

.source-sans-pro,
.source-sans-pro * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Source Sans Pro", sans-serif !important;
}

To activate the Source Sans Pro Medium font use the following custom CSS:


@font-face {
  font-family: 'Source Sans Pro Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/source-sans-pro-medium.woff2') format('woff2'),
       url('/assets/fonts/source-sans-pro-medium.woff') format('woff');
}

.source-sans-pro-medium,
.source-sans-pro-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Source Sans Pro Medium", sans-serif !important;
}

To activate the Source Sans Pro Heavy font use the following custom CSS:


@font-face {
  font-family: 'Source Sans Pro Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/source-sans-pro-heavy.woff2') format('woff2'),
       url('/assets/fonts/source-sans-pro-heavy.woff') format('woff');
}

.source-sans-pro-heavy,
.source-sans-pro-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Source Sans Pro Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



9. Pro Fonts - Raleway

The following sample slide demonstrates the use of the Raleway font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-RALEWAY

This sample slide was rendered using the following markdown snippet:

---?color=#F79F79

@snap[north-west raleway-heavy]
# GitPitch
@snapend

@snap[west raleway text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west raleway-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Raleway font use the following custom CSS:


@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/raleway-normal.woff2') format('woff2'),
       url('/assets/fonts/raleway-normal.woff') format('woff');
}

.raleway,
.raleway * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Raleway", sans-serif !important;
}

To activate the Raleway Medium font use the following custom CSS:


@font-face {
  font-family: 'Raleway Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/raleway-medium.woff2') format('woff2'),
       url('/assets/fonts/raleway-medium.woff') format('woff');
}

.raleway-medium,
.raleway-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Raleway Medium", sans-serif !important;
}

To activate the Raleway Heavy font use the following custom CSS:


@font-face {
  font-family: 'Raleway Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/raleway-heavy.woff2') format('woff2'),
       url('/assets/fonts/raleway-heavy.woff') format('woff');
}

.raleway-heavy,
.raleway-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Raleway Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



10. Pro Fonts - Poppins

The following sample slide demonstrates the use of the Poppins font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-POPPINS

This sample slide was rendered using the following markdown snippet:

---?color=#F7D08A

@snap[north-west poppins-heavy]
# GitPitch
@snapend

@snap[west poppins text-gray]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west poppins-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Poppins font use the following custom CSS:


@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/poppins-normal.woff2') format('woff2'),
       url('/assets/fonts/poppins-normal.woff') format('woff');
}

.poppins,
.poppins * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Poppins", sans-serif !important;
}

To activate the Poppins Medium font use the following custom CSS:


@font-face {
  font-family: 'Poppins Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/poppins-medium.woff2') format('woff2'),
       url('/assets/fonts/poppins-medium.woff') format('woff');
}

.poppins-medium,
.poppins-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Poppins Medium", sans-serif !important;
}

To activate the Poppins Heavy font use the following custom CSS:


@font-face {
  font-family: 'Poppins Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/poppins-heavy.woff2') format('woff2'),
       url('/assets/fonts/poppins-heavy.woff') format('woff');
}

.poppins-heavy,
.poppins-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Poppins Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



11. Pro Fonts - Ubuntu

The following sample slide demonstrates the use of the Ubuntu font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-UBUNTU

This sample slide was rendered using the following markdown snippet:

---?color=#87B6A7

@snap[north-west ubuntu-heavy]
# GitPitch
@snapend

@snap[west ubuntu text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west ubuntu-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Ubuntu font use the following custom CSS:


@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/ubuntu-normal.woff2') format('woff2'),
       url('/assets/fonts/ubuntu-normal.woff') format('woff');
}

.ubuntu,
.ubuntu * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Ubuntu", sans-serif !important;
}

To activate the Ubuntu Medium font use the following custom CSS:


@font-face {
  font-family: 'Ubuntu Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/ubuntu-medium.woff2') format('woff2'),
       url('/assets/fonts/ubuntu-medium.woff') format('woff');
}

.ubuntu-medium,
.ubuntu-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Ubuntu Medium", sans-serif !important;
}

To activate the Ubuntu Heavy font use the following custom CSS:


@font-face {
  font-family: 'Ubuntu Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/ubuntu-heavy.woff2') format('woff2'),
       url('/assets/fonts/ubuntu-heavy.woff') format('woff');
}

.ubuntu-heavy,
.ubuntu-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Ubuntu Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



12. Pro Fonts - Nunito Sans

The following sample slide demonstrates the use of the Nunito Sans font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-NUNITO-SANS

This sample slide was rendered using the following markdown snippet:

---?color=#F79F79

@snap[north-west nunito-sans-heavy]
# GitPitch
@snapend

@snap[west nunito-sans text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west nunito-sans-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Nunito Sans font use the following custom CSS:


@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/nunito-sans-normal.woff2') format('woff2'),
       url('/assets/fonts/nunito-sans-normal.woff') format('woff');
}

.nunito-sans,
.nunito-sans * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Nunito Sans", sans-serif !important;
}

To activate the Nunito Sans Medium font use the following custom CSS:


@font-face {
  font-family: 'Nunito Sans Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/nunito-sans-medium.woff2') format('woff2'),
       url('/assets/fonts/nunito-sans-medium.woff') format('woff');
}

.nunito-sans-medium,
.nunito-sans-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Nunito Sans Medium", sans-serif !important;
}

To activate the Nunito Sans Heavy font use the following custom CSS:


@font-face {
  font-family: 'Nunito Sans Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/nunito-sans-heavy.woff2') format('woff2'),
       url('/assets/fonts/nunito-sans-heavy.woff') format('woff');
}

.nunito-sans-heavy,
.nunito-sans-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Nunito Sans Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



13. Pro Fonts - Work Sans

The following sample slide demonstrates the use of the Work Sans font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-WORK-SANS

This sample slide was rendered using the following markdown snippet:

---?color=#F7D08A

@snap[north-west work-sans-heavy]
# GitPitch
@snapend

@snap[west work-sans text-gray]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west work-sans-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Work Sans font use the following custom CSS:


@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/work-sans-normal.woff2') format('woff2'),
       url('/assets/fonts/work-sans-normal.woff') format('woff');
}

.work-sans,
.work-sans * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Work Sans", sans-serif !important;
}

To activate the Work Sans Medium font use the following custom CSS:


@font-face {
  font-family: 'Work Sans Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/work-sans-medium.woff2') format('woff2'),
       url('/assets/fonts/work-sans-medium.woff') format('woff');
}

.work-sans-medium,
.work-sans-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Work Sans Medium", sans-serif !important;
}

To activate the Work Sans Heavy font use the following custom CSS:


@font-face {
  font-family: 'Work Sans Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/work-sans-heavy.woff2') format('woff2'),
       url('/assets/fonts/work-sans-heavy.woff') format('woff');
}

.work-sans-heavy,
.work-sans-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Work Sans Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



14. Pro Fonts - Prompt

The following sample slide demonstrates the use of the Prompt font. Text appears from top-to-bottom on the slide using heavy, normal, and medium weights respectively:

PRO-FONT-PROMPT

This sample slide was rendered using the following markdown snippet:

---?color=#87B6A7

@snap[north-west prompt-heavy]
# GitPitch
@snapend

@snap[west prompt text-white]
For Conferences + Meetups.<br>And the delivery of Training Materials.
@snapend

@snap[south-west prompt-medium]
#### The Fastest Way from Idea to Presentation for Everyone on GitHub, GitLab, and Bitbucket @emoji[heart_eyes]
@snapend

To activate the Prompt font use the following custom CSS:


@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/prompt-normal.woff2') format('woff2'),
       url('/assets/fonts/prompt-normal.woff') format('woff');
}

.prompt,
.prompt * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Prompt", sans-serif !important;
}

To activate the Prompt Medium font use the following custom CSS:


@font-face {
  font-family: 'Prompt Medium';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/prompt-medium.woff2') format('woff2'),
       url('/assets/fonts/prompt-medium.woff') format('woff');
}

.prompt-medium,
.prompt-medium * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Prompt Medium", sans-serif !important;
}

To activate the Prompt Heavy font use the following custom CSS:


@font-face {
  font-family: 'Prompt Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/prompt-heavy.woff2') format('woff2'),
       url('/assets/fonts/prompt-heavy.woff') format('woff');
}

.prompt-heavy,
.prompt-heavy * {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Prompt Heavy", sans-serif !important;
}

Note, the /assets/fonts path in the above CSS snippets are paths internal to GitPitch. These files should not be added to your repository. Pro Fonts work out-of-the-box, effortlessly.



15. Pro Fonts Global Font Targeting

Each of the sample slides above demonstrate the activation of a Pro Font for selected text on a specific slide.

Pro Fonts can also be activated globally for targeted text on any slide. For example, you could use the following custom CSS to activate the Work Sans Heavy font for all H1, H2 heading elements and Ubuntu for all H3 heading elements in your presentation markdown:


@font-face {
  font-family: 'Work Sans Heavy';
  font-style: normal;
  font-weight: 900;
  src: url('/assets/fonts/work-sans-heavy.woff2') format('woff2'),
       url('/assets/fonts/work-sans-heavy.woff') format('woff');
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/ubuntu-normal.woff2') format('woff2'),
       url('/assets/fonts/ubuntu-normal.woff') format('woff');
}

.reveal h1,
.reveal h2 {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Work Sans Heavy", sans-serif !important;
}

.reveal h3 {
  text-shadow: none !important;
  text-transform: none !important;
  font-family: "Ubuntu", sans-serif !important;
}

These custom style rules are then automatically activated for your PITCHME.md markdown presentation content, for example:

---?color=#F79F79

# GITPITCH

### The Markdown Presentation Service on Git

This markdown snippet renders as follows:

PRO-FONT-GLOBAL-STYLE

As expected, the sample H1 heading has been rendered using the Work Sans Heavy font while the sample H3 heading has been automatically rendered using the Ubuntu font.



16. Pro Fonts Global Font Default

You can use Pro Fonts to override the global font-family style rule set by the fixed theme for your presentation as follows:


@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/raleway-normal.woff2') format('woff2'),
       url('/assets/fonts/raleway-normal.woff') format('woff');
}

.reveal {
  font-family: 'Raleway', sans-serif;
}

The sample custom CSS shown above would activate the Raleway font as the default font for text rendered on any slide within your presentation.