Skip to main content

Notifications

Community site session details

Community site session details

Session Id : z+a9gkb14IMo9ZQEnlyu20
Power Pages - General Discussions
Answered

Local upload for google fonts

Like (1) ShareShare
ReportReport
Posted on 14 Jul 2023 13:52:30 by 2,143 Super User 2025 Season 1

Hello everyone,

 

does anybody know if there's a way to upload or embed a font-family locally?

That problem occurs specific for the german market as the GDPR cannot be fulfilled when we just use a link to google fonts to use some fonts.

Unfortunately the link gives some information to google and does not comply with the GDPR.

Is there a way to host the fonts locally as it works for self hosted websites?

Categories:
  • Verified answer
    Lucas001 Profile Picture
    2,143 Super User 2025 Season 1 on 17 Jul 2023 at 07:13:14
    Re: Local upload for google fonts

    Hi @saudali_25, @Fubar,

     

    thanks for your support.

    The solution from @saudali_25 works, but I had to change the url a bit.

    It seems that the /webfiles/ is not longer needed and supported when using the new power pages.

    But that way the font is locally embedded and further GDPR conform. Thanks a lot!

     

     

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

     

     

     

  • Fubar Profile Picture
    7,850 Super User 2025 Season 1 on 16 Jul 2023 at 22:21:24
    Re: Local upload for google fonts

    I have used embedded fonts before and as per Saudali's post, you upload the fonts as Web Files, then update the CSS to use the Web Files.

  • Verified answer
    Saud Ali Profile Picture
    812 Super User 2024 Season 1 on 14 Jul 2023 at 15:09:45
    Re: Local upload for google fonts

    Hi @Lucas001 ,

     

    I have not done it but I'm sure we can do it. Have you tried to upload your font file (e.g., .ttf, .woff, .woff2) in under Web Files? Then in Portal theme or CSS customization, define a @font-face rule to specify the font-family and the URL/relative path of the font files. Here's an example:

     

     

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

     

     

    You can apply the custom font-family to specific elements or globally in your Power Portals theme or CSS customization. For example: 

     

     

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

     

     

    Thanks,

    Saud

     

    If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,745 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 66,091 Most Valuable Professional

Leaderboard
Loading started