By default, the Divi Theme uses Open Sans as the font for all headers and paragraph text. You may sometimes find it boring, but hopefully after looking at this, you’ll be filled with ideas on how to jazz it up. We offer you five examples of the default text and the CSS we used to change it.
1. Try auto capitalizing the first letter in headers
2. This chunky look is great for headers
3. A little extra space adds a touch of class
4. “Slanted text is good for quotes etc and a different background style can help make text pop. this is also a good trick for code blocks in tutorials and things like that.”
5. Long headers? Reducing the space between letters can make sure you don’t fall onto a hundred lines…
And here’s the CSS we used…
p.demo-one {
font-size: 18px;
text-transform: capitalize;
font-weight: 600;
letter-spacing: -0.5px;
}
p.demo-two {
font-size: 28px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 0.5px;
}
p.demo-three {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
font-weight: 100;
word-spacing: 2px;
}
p.demo-four {
font-style: italic;
font-size: 30px;
font-weight: 100;
background: #e3e3e3;
border-radius: 10px;
border: 1px solid #b3b3b3;
box-shadow: inset 0 0 25px #303030;
padding-top: 14px;
padding-right: 20px;
padding-bottom: 14px;
padding-left: 20px;
line-height: 40px;
}
p.demo-five {
color: #000000;
font-weight: bold;
line-height: 30px;
font-size: 25px;
text-transform: uppercase;
letter-spacing: -1px;
border-bottom: double 10px;
padding-bottom: 10px;
}
By no means meant as the ‘be all’ and ‘end all’ of what is possible with Open Sans and CSS, but hopefully these five examples will give you a good jumping off point. Happy coding!
This site says that Divi just uses Google fonts (https://www.divithemeexamples.com/divi-fonts-preview/) so can i get all Google fonts or just some of them as listed in the link from Karen above?
Hi Stephan,
I would have liked to see some samples/outcomes of the results in this blog post.
Can you please add them?
I use this as a resource: http://media-star.com/divi-fonts-complete-divi-font-list/
Has ALL the available Divi fonts in one place
Good CSS tips. Thanks!