fancy first letter


Big first letters

Emil Hvitfeldt true

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.



    css: ["stylesheet.css"]
    lib_dir: libs
    seal: FALSE
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false

# Sample Header

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.


@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;


Text and figures are licensed under Creative Commons Attribution CC BY 4.0. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".


For attribution, please cite this work as

Hvitfeldt (2021, May 9). Xaringan Gallery: fancy first letter. Retrieved from

BibTeX citation

  author = {Hvitfeldt, Emil},
  title = {Xaringan Gallery: fancy first letter},
  url = {},
  year = {2021}