Type Settings

Choose the best fonts.

You should invest a little bit of your times (and money if you can) by browsing the Google Fonts library and/or Adobe Typekit. Collektion is currently demonstrated by using Adobe Typekit’s font library for absolute better font rendering on any devices.

Default Type Settings

Collektion will use Safe Web Fonts and Google Web Fonts when installed and activated on your WordPress installation. You will need to import our Theme Settings in order to complete the installation. If you want to modify the current Type Settings, navigate to Appearance -> Theme Options -> Type Settings.

Google Web Fonts

Default Body Font – Source Sans Pro
Default Headings Font – Source Sans Pro
Default Accent Font – Cardo

Standard / Google Webfonts CSS

Copy & paste the following CSS block to your Theme Options if you plan to use Safe Web Fonts or Google Web Fonts.

body, .field, .lead {
    {{sbwp_body_font}}
    color: {{sbwp_body_font_color}};
}
h1, h2, h3, h4, h5, h6 {
    {{sbwp_heading_font}}
    color: {{sbwp_heading_font_color}};
}
.sb-slidebar ul li a {
    {{sbwp_font_typekit_headings_font}}
}
.accent, h2 + h3, .wp-caption-text, blockquote p {
    {{sbwp_accent_font}}
    font-weight: 400 !important;
    color: {{sbwp_accent_font_color}};
}
.accent {
    font-style: italic;
}

Adobe Typekit

Default Body Font – Source Sans Pro
Default Headings Font – Source Sans Pro
Default Accent Font – Adobe Garamond Pro

Typekit Custom CSS

When you find a font you want to use, click “Use Fonts” on the font card or on the font detail page. Select the Web tab in the window that opens, and then “create a new kit”. Please refer to this article to learn more about this process.

Copy & paste the following CSS block to your Theme Options if you plan to use Adobe Typekit.

body, .field, .lead {
    font-family: "{{sbwp_font_typekit_body_font}}", sans-serif;
    color: {{sbwp_font_typekit_body_color}};
}
h1, h2, h3, h4, h5, h6 {
    font-family: "{{sbwp_font_typekit_headings_font}}", sans-serif;
    color: {{sbwp_font_typekit_headings_color}};
}
.sb-slidebar ul li a {
    font-family: "{{sbwp_font_typekit_headings_font}}", sans-serif;
}
.accent, h2 + h3, .wp-caption-text, blockquote p {
    font-family: "{{sbwp_font_typekit_accent_font}}", serif;
    font-weight: 400 !important;
    color: {{sbwp_font_typekit_accent_color}};
}
.accent {
    font-style: italic;
}

* When entering custom CSS codes, your web server need to create a dynamic.css file within the theme folder. Make sure your files are writable by the web server.