Lora font pairings
Lora is a warm serif with calligraphic curves, comfortable in articles and headings. It pairs well with plain sans serifs and with sturdier serifs.
5 companions below, each shown with Lora as the heading and as the body text where that makes sense.
Lora + Merriweather
Lora heading, Merriweather body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Merriweather heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Both are serifs, so this is a close pairing. Merriweather is sturdier and wider, which separates it from Lora's calligraphic curves.
Heading font: Lora · Body font: Merriweather
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Merriweather:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Merriweather', serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Merriweather', serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}Lora + Source Sans 3
Lora heading, Source Sans 3 body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Source Sans 3 heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
A sans text face under Lora's serif headings gives clear roles. Source Sans 3 stays neutral and compact.
Heading font: Lora · Body font: Source Sans 3
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Source+Sans+3:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Source Sans 3', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}Lora + Roboto
Lora heading, Roboto body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Roboto heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Roboto is a modern sans that contrasts with Lora's calligraphic serif. It suits articles where headings should feel warmer than the text.
Heading font: Lora · Body font: Roboto
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Roboto:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}Lora + Ubuntu
Lora heading, Ubuntu body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Ubuntu heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Ubuntu's distinct sans has more personality than most text faces. Lora headings calm it down.
Heading font: Lora · Body font: Ubuntu
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Ubuntu:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}Lora + Open Sans
Lora heading, Open Sans body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Open Sans heading, Lora body
A good pairing gives each font a clear job. The heading sets the tone and the body carries the reading, so judge both at the size you will use. Try the pair with your own words before you commit.
Open Sans is plain and wide, so it supports Lora's headings without adding another voice.
Heading font: Lora · Body font: Open Sans
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Open+Sans:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Lora', serif;
font-weight: 700;
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}Swap the roles
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&family=Lora:wght@400&display=swap');
h1, h2, h3 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
body {
font-family: 'Lora', serif;
font-weight: 400;
}More font pairings
These are Google Fonts, made by the designers named on each page and published free under an open licence. Zaps lists them, and downloads come from Google Fonts.