4

I am building custom composed look for office 365 publishing site collection.

The site collection that I am going to apply this composed look is NOT root site collection, so the url of the site collection is https://srvname.sharepoint.com/sites/MySiteCollection.

The composed look will contain spfont file as i am using custom fonts. I deployed custom fonts(eof,wotff, etc) to site collections Theme folder.

spfont file references these fonts.

Problem: at the moment I am forced to provide full url to the font itself, e.g. /sites/MySiteCollection/_catalogs/theme/15/myownfont.eot . I cant use any ~sitecollection token, or even reference like _catalogs/..... . It is inconvenient to use url from root site collection as we have dev/staging/prod tenants.

any help will be highly appreciated

2

Reference it from a sitecollection stylesheet instead. That way, it will be relative to where the css lives in each site collection. Or you can place it at a top level css (if each site collection inherits it) and all sites will load your custom font.

Check out my answer on this post which may help.

Add Laos Font to SharePoint 2013 or New font to SharePoint 2013

  • thanks. but i want this references in spfont file and not in css file. in spfont file the trick you mentioned does not work. – H.D. Aug 27 '14 at 7:56
1

I have the same problem. Still haven't found a solution, so until then I have decided to host the font files on a separate website, and link to these using their full url. This is not an optimal solution, since it requires a separate website. But for me, since I use a provider hosted app to provision the branding elements, this website already exists for me. I wish there was a way to get the spfont-file to work instead!

0

If you can get the fonts via Google Fonts, I've found the best way to do this is to:

  1. Visit http://webfonts.azurewebsites.net/
  2. Enter the Google Font value. If your Google Font URL looked like 'fonts.googleapis.com/css?family=Open+Sans', your Google Font value would be 'Open+Sans'.
  3. Copy the eot, woff, ttf and svg URLs generated by the application and use them in your .spfont file. You'll need to replace http with https since you're using Office 365.

Props to Elio Struyf for his SharePoint font theming guide and the Google Font conversion application in step 1: http://www.eliostruyf.com/use-google-fonts-font-scheme/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.