KCC Typography
Roboto
Ro
Sample
The jay, pig, fox, zebra and my wolves quack!
Usage
Heading Font
Oswald
Os
Sample
The quick brown fox jumps over the lazy dog.
Usage
HEADING FONT
Open Sans
Op
Sample
When zombies arrive, quickly fax judge Pat!
Usage
Paragraph text
Heading Level 1
- RESERVED
ALTERNATE HEADING LEVEL 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraph text
- Unordered List
- Unordered List
- Unordered List
- Ordered List
- Ordered List
- Ordered List
Overview
All content in the main section of a page uses Google Fonts.
There is only one other font that we use—the "Eurostile" Adobe Font. However, it has a special use-case, it should only be used in the site's header (with kcc logo) or navigation.
Embedding Google Fonts
To embed all the Google fonts used for page content, copy the following code into the <head> element of your HTML document:
<!-- Google font preconnects -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Google font stylesheet -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Oswald:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Typekit font for KCC logo-font -->
<link rel="stylesheet" href="https://use.typekit.net/mli7lsm.css">
Alternate Method Using @import
If your system requires the fonts as an @import in a stylesheet, copy the following code into your stylesheet before you define your typography styles:
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Oswald:500|Roboto:500,700&display=swap');
/* The font-family declarations must happen after the @import rules. */
/* font-family: 'Roboto', sans-serif; */
/* font-family: 'Open Sans', sans-serif; */
/* font-family: 'Oswald', sans-serif; */
Embedding The Adobe Font
The Eurostile Adobe Font is used in a header/navbar (if your system supports the use of headings in a header/navbar — as opposed to a logo/graphic.)
If you system supports using a heading within a header/navbar, copy the following code into the <head> of your HTML document:
<!-- Link to 'Eurostile' Adobe Font stylesheet -->
<link rel="stylesheet" href="https://use.typekit.net/mli7lsm.css">
H1
HEADING ONE
Typeface:
Eurostile
Font vendor:
CSS
.typography__section--heading {
color: #c61f48;
font-family: 'Oswald', sans-serif;
font-size: 2rem;
font-weight: 500;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
Heading Styles
H1
HEADING ONE
Typeface:
Oswald
Font vendor:
CSS
.typography__section--heading {
color: #c61f48;
font-family: 'Oswald', sans-serif;
font-size: 2rem;
font-weight: 500;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
H2
Heading Two
Typeface:
Roboto
Font vendor:
CSS
.typography__h2 {
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: 2rem;
font-weight: 500;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
H3
Heading Three
Typeface:
Roboto
Font vendor:
CSS
.typography__h3 {
color: #0f3b63;
font-family: 'Roboto', sans-serif;
font-size: 1.75rem;
font-weight: 500;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
H4
Heading Four
Typeface:
Roboto
Font vendor:
CSS
.typography__h3 {
color: #c61f48;
font-family: 'Roboto', sans-serif;
font-size: 1.7rem;
font-weight: 500;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
H5
Heading Five
Typeface:
Roboto
Font vendor:
CSS
.typography__h3 {
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: 1.5rem;
font-weight: 700;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
H6
Heading Six
Typeface:
Roboto
Font vendor:
CSS
.typography__h3 {
color: #666666;
font-family: 'Roboto', sans-serif;
font-size: 1.4rem;
font-weight: 700;
// styles inherited
// from Bootstrap/reboot
line-height: 1.2;
margin-bottom: .5rem;
margin-top: 0;
}
Paragraphs and Other Text Items
P
Paragraph text
Typeface:
Open Sans
Font vendor:
CSS
p {
color: #666666;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
// styles inherited
// from Bootstrap/reboot
line-height: 1.5;
margin-bottom: .5rem;
margin-top: 0;
}
UL
Unordered list
Typeface:
Open Sans
Font vendor:
CSS
ul {
color: #666666;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
// styles inherited
// from Bootstrap/reboot
line-height: 1.5;
margin-bottom: .5rem;
margin-top: 0;
}
OL
Ordered list
Typeface:
Open Sans
Font vendor:
CSS
ol {
color: #666666;
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
// styles inherited
// from Bootstrap/reboot
line-height: 1.5;
margin-bottom: .5rem;
margin-top: 0;
}