fancy first letter

Big first letters

Drop caps are a fun way to add a little bit of flair to a paragraph.

Using the ::first-letter pseudo-element we can specifying the style of that is applied to the first letter of a paragraph.

You can go above and beyond and specify a custom font to be used in the drop-cap. The romantik font was used in this example.

All files found here.

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["stylesheet.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# Sample Header

.drop-cap[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

stylesheet.css

@font-face {
    font-family: 'Romantik';
    src: url('Romantik.woff2') format('woff2'),
         url('Romantik.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.drop-cap::first-letter {
    font-family: 'Romantik';
    float: left;
    font-size: 65px;
    line-height: 70px;
    padding-top: 10px;
    padding-right: 8px;
    padding-left: 3px;
    margin-bottom: -15px;
}