When adding Google Fonts or Adobe Fonts some weights may not be accessible from within our Typography Font dropdown and Styles (Italic/Bold).
Only Regular, Italic, Bold and Bold Italic may be accessible for the Custom Font you add but if you wanting to use a Light or Extra Bold Italic font weight then it will require adding a CSS override.
This does require a basic to intermediate knowledge of CSS and HTML.
Following are some generic instructions using your Format account and as an example the Adobe Forma DJR Text font with eight font variations.
-
Web Project Name
-
Project ID
-
Fonts included
-
Copy CSS
When writing the CSS you would copy-and-paste the specific option and I have found I needed to include the !important tag to ensure the correct weight is used.
Below is the CSS for each of your eight weights and styles (normal or italic)
/* Adobe Font Family Forma DJR Text CSS */
/* Light */
font-family: forma-djr-text, sans-serif;
font-weight: 300!important;
font-style: normal;
/* Light Italic */
font-family: forma-djr-text, sans-serif;
font-weight: 300!important;
font-style: italic;
/* Regular */
font-family: forma-djr-text, sans-serif;
font-weight: 400!important;
font-style: normal;
/* Italic */
font-family: forma-djr-text, sans-serif;
font-weight: 400!important;
font-style: italic;
/* Bold */
font-family: forma-djr-text, sans-serif;
font-weight: 700!important;
font-style: normal;
/* Bold Italic */
font-family: forma-djr-text, sans-serif;
font-weight: 700!important;
font-style: italic;
/* Extra Bold */
font-family: forma-djr-text, sans-serif;
font-weight: 800!important;
font-style: normal;
/* Extra Bold Italic */
font-family: forma-djr-text, sans-serif;
font-weight: 800!important;
font-style: italic;
To use this you would need to know which font you are going to target and this requires using the browser Web Developer or Web Inspector tools to target, In my example I am going to be targeting the h2 heading tag that appears throughout your site to make it easy.
-
Developer tools to select the h2 heading tag for 'Where I've been featured'
-
Showing the code selected
-
Style attributes
-
Default font weight is the Forma DJR Text font set to Bold (not using the actual font Forma DJR Text Bold (which would be
font-weight: 700!important;
4. Used Dev Tools to edit the style attributes to set font-weight:800; and font-style: italic;
5. The Changes pane shows what has been edited (red color has been disabled, green color has been enabled).
To make this change permanent on your page you would need to edit the User Stylesheet CSS code which is found in your Format Account > Portfolio > Design > Code Editor area. Do not edit the Theme Stylesheet SCSS file.
The examples below include the code and a screenshot of how it would change the h2 heading to be Extra Bold Italic in the in-app preview.
/* Set h2 font to use Forma DJR Text Extra Bold Italic */
._4ORMAT_content_page_row h2{
font-family: forma-djr-text, sans-serif;
font-weight: 800;
font-style: italic;
}
/* ends */
-
h2 heading set with
font-weight:800!important;andfont-style:italic; -
Click 'Preview Edits'
-
In-app preview will show code overrides
-
Save Changes if happy, or edit/remove code as required
If you were wanting to set the h2 heading to be Light, you would include the CSS as follows:
/* Set h2 font to use Forma DJR Text Light */
._4ORMAT_content_page_row h2{
font-family: forma-djr-text, sans-serif;
font-weight: 200!important;
}
/* ends */
-
h2 heading set with
font-weight:200!important; -
Click 'Preview Edits'
-
In-app preview will show code overrides
-
Save Changes if happy, or edit/remove code as required
This is a generic overview on how to edit but some CSS and HTML concepts are not always easy to grasp, unfortunately we do not have the ability to really provide full comprehensive instructions for every CSS ID or Class that could require overriding but the generic IDs and Classes we may use are:
body, h1, h2, h3, h4, h5, h6, p, menu, nav, address, ul, li, ol,
#caption, #caption h1, #caption h2, #caption p
Although we can not provide full CSS assistance, we will attempt to help you.
Reach us at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!