Skip to content
TC edited this page May 24, 2018 · 5 revisions

If you look into example.css, it comes with several predefined fonts for code:

.remark-code, .remark-inline-code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace; }

and for the body:

body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; }

For the headers, only Yanone Kaffeesatz is specified. This font is import from Google fonts (@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);).

h1, h2, h3 {
  font-family: 'Yanone Kaffeesatz';
  font-weight: normal;
}

If you want to change your code font to "Ubunto Mono", you can just search for that font on Google fonts, import it and set it in the specific code chunk:

@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }

You do not have to delete the predefined ones - if the first font specified does not work, fallback fonts are a good backup.

NOTE: If you are using self_contained: true, see issue #6 when using custom fonts. NOTE2: If you are using netlify to deploy your slides and defined google fonts as above, see issue #141 to avoid google fonts not displaying.