Incorporating brand fonts and colors

Incorporating brand fonts and colors into Power Pages ensures visual consistency and reinforces brand identity across your portal. Below is a comprehensive step-by-step guide to help you seamlessly apply your organization’s branding using custom CSS and Liquid.

1. Define Your Brand Identity Assets

Gather the following:

Brand Fonts (Google Fonts or licensed files)
Primary and Secondary Colors (hex codes, RGB, or HSL)
Font Sizes and Weights (heading/body rules)
Usage Guidelines (e.g., button style, hyperlink colors, hover states)

2. Upload Fonts and CSS Files to Power Pages

Option A: Using Web Files

Go to Power Apps > Portal Management App.
Navigate to Web Files > + New.
Upload your custom CSS or font files.
- Example:
  - Name: brand.css
  - Partial URL: /css/brand.css
  - MIME Type: text/css
  - Upload your .woff, .woff2, .ttf, or .css files.

Option B: Use External Links

For Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

3. Add CSS Reference in Web Template

Go to Web Templates and include your stylesheet reference inside the <head> tag:

<link rel="stylesheet" href="/css/brand.css" />

For external fonts:

<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

4. Create Custom CSS (brand.css)

/* Brand Colors */
:root {
  --primary-color: #0056b3;
  --secondary-color: #e0e0e0;
  --accent-color: #fdbf00;
  --text-color: #333;
  --heading-font: 'Open Sans', sans-serif;
}

/* Apply fonts globally */
body {
  font-family: var(--heading-font);
  color: var(--text-color);
}

/* Header & Footer Styling */
.navbar, footer {
  background-color: var(--primary-color);
  color: white;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary-color);
  border: none;
  color: white;
}
.btn-primary:hover {
  background-color: var(--accent-color);
  color: #000;
}

/* Headings */
h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--primary-color);
}

5. Apply Classes in Web Page Content

In Liquid templates or content snippets:

<h1 class="main-heading">Welcome to Our Portal</h1>
<p class="intro-text">We align our vision with your values.</p>
<a href="#" class="btn btn-primary">Get Started</a>

Ensure the classes match the CSS you defined.

6. Override Default Portal Styles

To override Microsoft’s default theme:

Create a custom CSS file.
Use !important sparingly for critical overrides.
Load your file after the default theme CSS.

a {
  color: var(--primary-color) !important;
}

7. Tips for Font Licensing

Google Fonts are free and safe to use.
For licensed fonts:
- Host the .woff/.woff2 files yourself.
- Link via @font-face in CSS:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/fonts/mycustomfont.woff2') format('woff2');
}

8. Maintain Consistency Across Components

Apply your color and font variables in:

Form Labels and Buttons
Navigation Bars
Web Page Text Content
Liquid Templates
Advanced Forms and Views

9. Clear Portal Cache After Updates

Changes to CSS or Web Templates may not reflect immediately. To refresh:

Go to Portal Admin Center > Portal Actions > Clear Cache

10. Testing and Responsiveness

Test on desktop and mobile.
Use Dev Tools (F12) to inspect styles.
Ensure text contrast meets accessibility standards (WCAG).