Embedding custom fonts and icons

1. Why Embed Custom Fonts and Icons in Power Pages?

Default Power Pages themes use basic system fonts and standard icons. By embedding custom fonts and icon libraries:

You enhance your site’s branding and identity.
Achieve consistent typography across all devices.
Use icon sets to improve UI clarity and user experience.

2. Ways to Embed Fonts and Icons

There are two primary options:

A. Link to Web-Based Fonts and Icon Libraries

Use services like Google Fonts or Font Awesome.
Easy to integrate using a <link> tag in a Web Template.

B. Upload and Host Font Files Locally

Upload .woff, .woff2, or .ttf font files as Web Files.
Use @font-face CSS rule to reference them.

Let’s go through both methods step-by-step.

3. Method A: Embed Web-Based Fonts (Google Fonts)

Step 1: Choose a Font from Google Fonts

Go to: https://fonts.google.com

Example: Let’s pick Poppins.

Step 2: Copy the Embed Link

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

Step 3: Add the Link to Header Web Template

Go to Portal Management App → Web Templates.
Open the Header template.
Paste the link in the <head> section:

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

Step 4: Apply Font in Custom CSS

Create or update your custom CSS (see previous lesson), and add:

body {
  font-family: 'Poppins', sans-serif;
}

Save and publish. Your site now uses the custom font!

4. Method B: Host Custom Fonts as Web Files

This method is useful if:

You want to use premium or corporate fonts.
You need offline reliability or don’t want external dependencies.

Step 1: Prepare the Font Files

Convert your fonts to web formats:

.woff
.woff2
.ttf

You can use online tools like Transfonter for conversion.

Step 2: Upload as Web Files

Go to Power Pages Portal Management App.
Open Web Files, click New.
Fill in:
- Name: e.g., CustomFont.woff2
- Partial URL: fonts/customfont.woff2
- Upload the file in Notes section.
Repeat for each font variant.

Step 3: Define Font in CSS

In your custom CSS file:

@font-face {
  font-family: 'MyCustomFont';
  src: url('/webfiles/fonts/customfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Step 4: Link the CSS File

Ensure your CSS file is uploaded and linked via the Header Web Template as explained in previous lessons.

5. Embedding Icon Fonts (e.g., Font Awesome)

Step 1: Get the Font Awesome CDN

From: https://fontawesome.com/start

Paste this in your Header Web Template:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

Step 2: Use Icons in HTML

Now you can add icons anywhere in your Web Pages:

<i class="fas fa-user"></i>
<i class="fas fa-envelope"></i>
<i class="fab fa-linkedin"></i>

6. Hosting Icon Fonts Locally (Advanced)

If you want to host icon fonts (like Font Awesome) locally:

Download the .woff2 and .css files from the Font Awesome kit.
Upload fonts as Web Files and reference them using @font-face.
Copy the Font Awesome CSS into your custom stylesheet.

This method is bulkier but offers full control.

7. Best Practices

Use Web-Based Fonts for Simplicity: Google Fonts load fast and are reliable.
Host Fonts Locally for Privacy or Branding: Especially if working with internal or premium typefaces.
Minimize Fonts: Limit to 1–2 font families with 2–3 weights to improve performance.
Use Icon Fonts Sparingly: For essential icons only. Consider inline SVGs for better accessibility.
Test Across Browsers: Ensure compatibility and rendering consistency.

8. Troubleshooting Tips

Issue	Solution
Font not loading	Check Partial URL, clear cache, ensure correct file format
Font weight not applied	Ensure you imported the correct font weights
Icon not visible	Check if Font Awesome link is correct and classes are spelled right
404 on font file	Make sure Web File is published and URL is accurate