Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fun with Fonts: Using The Right Fonts For Your WordPress Website

Amber Hewitt
September 16, 2017

Fun with Fonts: Using The Right Fonts For Your WordPress Website

Readability is an important part to any website. Choosing the right font can make all the difference in any design. Discover where you can get web fonts (free, subscription, or download and install yourself). Learn how to select the right fonts, size your fonts correctly, and add them to your WordPress website without slowing it down.

Presented at WordCamp Sacramento 2017 // September 16, 2017

Amber Hewitt

September 16, 2017

More Decks by Amber Hewitt

Other Decks in Design


  1. Using the Right Fonts for Your WordPress Website WITH FONTS

  2. Web design is 95% typography Oliver Reichenstein

  3. Typography must often draw attention to itself before it will

    be read.
  4. Yet in order to be read,
 it must relinquish

    attention it has drawn.
  5. Legibility doesn’t equal readability

  6. Just because you can read the text doesn’t mean your

    readers can.
  7. Common Classifications

  8. Choosing the Right Fonts Know your context • What are

    you trying to convey? • Is it long-form reading or short bursts of text? • Use word association: powerful, playful, innocent, handmade, industrial, etc. • Is it appropriate?
  9. Pairing Fonts • Look for distinction • Look for harmony

    • Some fonts have a sans and serif 
 (Freight Sans Pro & Freight Text Pro) • Look at other websites for good 
 font pairings • Do you need more than one font?
  10. Setting Your Type • Type Size
 (16px for mobile, 18-22px

    for desktop) • Line-width
 (45-75 characters wide) • Line-height
 (for reading comfort) • Type color & contrast
 (for readability and accessibility)
  11. Setting Your Type Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge

    Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge Hamburge
  12. Headings Use a modular scale

  13. Where to Get Web Fonts Subscription Services Adobe Typekit Fonts.com

    Type Network Cloud.typography
  14. Where to Get Web Fonts Download Web Fonts Most sites

    that sell desktop fonts 
 have web fonts as well
  15. Loading Fonts @font-face {
 font-family: Elena, serif;
 src: url(elena-regular.woff2) format(“woff2”),

    url(elena-regular.woff) format(“woff”),
 url(elena-regular.otf) format(“opentype”);
 font-weight: normal;
 } Loading fonts from your server in CSS
  16. Using Google Fonts Google hosts the font files for you.

  17. Using Google Fonts Google hosts the font files for you.

  18. Using Typekit

  19. Using Typekit Typekit Fonts for WordPress
 https://wordpress.org/plugins/typekit-fonts-for- wordpress/

  20. Using Fonts in CSS h1 {
 font-family: Whitney, Georgia, serif;

    font-size: 72px;
 font-weight: bold;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 } HAMBURGE Result:
  21. Resources Better Web Typography (free email course)
 betterwebtype.com Combining Typefaces

    (free PDF)
 https://typekit.files.wordpress.com/2016/04/ combiningtypefaces.pdf Webfont Handbook by Bram Stein
 https://abookapart.com/products/webfont- handbook
  22. Resources Typecast (test fonts for free)
 typecast.com HTML Arrows (Codes

    for special characters)
 htmlarrows.com Type Scale (Calculator for sizing headings)
  23. WhatFont Chrome extension for identifying fonts on websites

  24. Inspiration Fonts In Use
 fontsinuse.com I Love Typography
 ilovetypography.com Typewolf

  25. Amber Hewitt amberhewitt.com @amberrhewitt Thank you!