Legacy Brandguide Tutorial: Building and Styling

Have you seen the new and improved Brandguide? Learn how to migrate your content and update to the new experience in Getting Started with Brandguide and Brandguide Building and Styling. Editing capabilities on your existing Brandguide will be going away on September 1, 2023. On December 1, 2023, the legacy Brandguide editor will no longer be available. 


Creating Sections within Brandguide

To create a new section, scroll to the bottom of the page and select "Add Section"


This will open up a modal that allows you to select the type of content that the section will contain. 


The first three section types come with a default structure that allows you to type in your chosen text and upload media from Brandfolder, your device, or an external link. 


The code block section allows you to build the section structure from scratch using HTML. This can be customized using CSS in the Advanced Styles, or by adding inline CSS directly into the code block.



Basic Styles

The Basic Styles is where you can change the font settings such as the font family, font size, and colors. Brandguide comes with a selection of default fonts, and colors can be selected by inputting a hex code or using the color picker tool.



The favicon setting allows you to upload a favicon image from brandfolder or your device.



Advanced Styles

The Advanced Styles is where you will import third party fonts and apply custom CSS to the elements on the page. This setting can be found at the bottom of the Styles tab below the favicon setting.


You can import third party fonts using an external stylesheet, script tag, or typekit Id. Our recommended method for importing fonts is by adding the @font-face property in the Custom CSS section.


The Custom Styles section is where you will input your CSS to further customize the brandguide. You may utilize this CSS section to import third party fonts, customize your code box HTML, or change the existing styling on any element on the page.


Below the Custom CSS is the option to show or hide the section navigation. You can also set a fixed navigation which will allow it to stay locked in place as you scroll down the page.


Importing Third-Party Fonts

@font-face is a CSS rule that gives you the ability to import and utilize third party fonts on your Brandguide. In this example, we are going to import the "Satisfy" font from Google Fonts, which is a library of free open-source fonts for use on the web.


You may copy the syntax below and add it to the Custom CSS section of your brandguide. This is the only CSS you will need to import the font. To import a different font, simply change the font-family, source URL, and format to that of your chosen font. Do note that you will include !important within the syntax to override the default font. 

@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');

Finding the font URL and format:

1. Navigate to your font library of choice and select the font that you want to add to your Brandguide. In our case, we are going to select "Satisfy" from Google Fonts.

2. Once selected, you will need to copy and paste the @import url into a new browser tab. 


3. This will take you to a page containing the url and format needed to import the font to your brandguide.


4. Copy the src url and paste it into the @fontface code along with the font-family.

Select Update CSS to save your changes. 


The newly imported font will populate in the font dropdown on the Basic Styles section. You have to option to change the font of your content through this interface or by using CSS in the advanced styles.


Proprietary Fonts 

1. Convert the font into a woff or woff2 format. This is a web font format that is more compatible for browsers than ttf/otf text file formats. 

2. Upload the font into a files section within Brandfolder. 

3. Copy the Attachment CDN Link (Original File) from the embed tab of the asset. 


4. Navigate to the advanced styles section of the Brandguide. You may copy the syntax below and add it to the Custom CSS section of your brandguide. This is the only CSS you will need to import the font. To import a different font, simply change the font-family, source URL, and format to that of your chosen font. Once the syntax is inputted, select update CSS to save changes.

@font-face {
font-family: 'akronim';

5. Fonts imported this way will not result in the font showing in the fonts dropdown for basic styles. Instead, you will need to manually apply the font within the advanced CSS. Below is an example of applying the Akronim font to imported paragraph tags. 

p {
font-family: 'akronim';
color: #333;


If you have any questions about this feature please contact support@brandfolder.com.

Was this article helpful?
1 out of 1 found this helpful