How To Upload New Fonts To Pages
Modified on: Tue, v Apr, 2022 at 2:46 AM
Add custom spider web fonts from Google Fonts, Fonts.com, Adobe Typekit and others to SharePoint and Function 365 sites using ShortPoint Theme Builder.
ShortPoint Theme Builder already includes 800 the most popular spider web fonts on the cyberspace. And now, you tin add your own fonts likewise.
Table OF CONTENTS
- Custom Web Fonts for SharePoint is finally here
- Before we begin
- Supported platforms
- Step 1: Upload Your Fonts to Web Server
- Question: How to go a directly download link to an particular inside Nugget Library?
- Stride 2: Use @font-face up to build your custom font CSS
- Step three: Add New Fonts to your SharePoint site
- Pace 4: Use the new Fonts to brand your SharePoint Sites
- FAQ:
- I added a font file, but information technology's not showing in the font picker?
- I just take i font file, not 4 equally in your example?
Before we begin
You can employ the solution described below if:
- You lot have ShortPoint installed on your SharePoint site(south);
- You are a ShortPoint User with an active license.
The Custom Fonts feature is part of ShortPoint version 5.one.x.10which has been released 12, Apr 2017.
Before adding your Custom Web Font, it's worth checking if your desired font already exists within ShortPoint Theme Builder, y'all can exercise this cheque past post-obit these steps:
- Open ShortPoint Theme Architect: Site Settings > ShortPoint Dashboard > Theme Builder > Customize my site
- Go to Fonts & Typography > Base of operations
- Search for your font in the font field, if you lot find it, yous can already use information technology without doing any extra work.
Supported platforms
- SharePoint 2013 On-Premise
- SharePoint 2016 On-Premise
- SharePoint 2019 On-Premise
- Office 365 (SharePoint Online)
- Hybrid
Note: In this article nosotros will show you how to add custom fonts manually to your SharePointand Part 365 sites.
Step ane: Upload Your Fonts to Web Server
You lot should prepare the font files and upload them somewhere. At the end, each font file should take a straight download link.
For the purposes of this article, we will utilize the SharePoint Site Assets Library, withal yous tin can employ any other library to shop your avails, including font files.
You can check this resources of fonts that are gratis for commercial use, download the fonts that you similar and so upload them to SharePoint site.
Question: How to get a straight download link to an item within Asset Library?
Assuming that your font files are placed directly at the root of your Site Assets library, practise the following steps to become the download URL:
one. Open your Site Avails library.
2. From the browser address bar, re-create the URL until the cease of Site Assets (run across the following paradigm):
three. Paste the URL, and so add the font file name at the finish of it:
For case, if you uploaded a font file named my-awesome-font.woff2 , to the root of the Site Assets, the download link should exist every bit follows:
YOUR_SHAREPOINT_SITE/SiteAssets/ my-crawly-font.woff2
And in case it was placed within dev/fonts folder inside site assets, the download link should exist as follows:
YOUR_SHAREPOINT_SITE/SiteAssets/ dev/fonts / my-crawly-font.woff2
Step ii: Use @font-confront to build your custom font CSS
Y'all should requite your new font a proper noun and add a reference to each font file. Your CSS will wait similar to this:
@font-confront { /* the font family hither could be anything, and it volition appear later in the fonts picker control */ font-family: 'MyWebFont'; /* IE9 Compat Modes */ src: url('path/to/your/webfont.eot'); src: /* Super modern browsers */ url('path/to/your/webfont.woff2') format('woff2'), /* Pretty Mod Browsers */ url('path/to/your/webfont.woff') format('woff'), /* Safari, Android, iOS */ url('path/to/your/webfont.ttf') format('truetype'); } For more information on how to utilize @font-face to reference your custom font using CSS, click here.
- Open ShortPoint Theme Architect: Site Settings > ShortPoint Dashboard > Theme Architect > Customize my site
- Go to Utilities - Custom Fonts - Advanced
- Paste your @font-face CSS code in the field
- Click Utilize
That's it! The new fonts will appear automatically in Fonts & Typography section in ShortPoint Theme Builder.
- Get to Fonts & Typography section in ShortPoint Theme Architect.
- So navigate to any font settings, for example, Basewhere you lot can change the default font for the whole site.
- You will find your new fonts in the fonts list under Custom Fonts category.
That's it :) Happy with your work? Just hitting the Publishpush.
FAQ:
I added a font file, but it'due south not showing in the font picker?
There could be more than one possible reason, cheque them below:
- Make sure in the CSS the URL is surrounded by single quotation:src: url( ' webfont.eot ' ).
- Make sure that URL to the font is correct: If you blazon information technology into a new browser tab, and hit enter, the font should be downloaded automatically.
- Make sure you lot provide the right format of the font based on its extension:
- .ttf > format('truetype')
- .woff > format('woff')
- .woff2 > format('woff2')
- .otf > format('opentype')
- .eof > does not need format
I only accept one font file, not 4 as in your example?
You tin but add a CSS to your one and only font file, but (based on the font blazon) it might non work across all browsers.
@font-face up { font-family: 'MyWebFont'; src: url('path/to/your/webfont.ttf') format('truetype'); } Related articles:
- Fonts and Typography Theme Architect Options for Modern SharePoint Sites
- Add together Custom Fonts from Google Fonts to a SharePoint Site
- Add together Custom Fonts from Fonts.com to SharePoint Site
- Add Custom Fonts from Adobe Typekit to SharePoint Site
Did you lot notice it helpful? Yes No
Send feedback
Source: https://support.shortpoint.com/support/solutions/articles/1000248227-adding-custom-fonts-to-sharepoint-sites-manually-using-shortpoint-theme-builder
Posted by: arcemosedeted.blogspot.com
0 Response to "How To Upload New Fonts To Pages"
Post a Comment