A simple question: “How can I change the fonts in SharePoint”
If only the answer were simple…
By the way, there is almost a simple answer here: http://hermansberghem.blogspot.com/2007/08/quickly-replace-default-sharepoint-font.html
Simply take his sample CSS and enclose them in <style> tags and insert in your master page just after SharePoint style sheet controls.
Why almost? It does not change everything. For example it does not change the fonts used in Quick Launch and Tabs. It’s a great idea, but needs some more work.
So let’s start with where SharePoint sets the fonts for a page:
- CORE.CSS style sheet – There is one CORE.CSS for each language installed. For English the location is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
- User selected theme (Site Actions, Site Settings, Theme) – The CSS file is located in C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES\themename\theme.css
- User uploaded CSS file (MOSS publishing sites and sub-sites only: Site Actions, Site Settings, Master Page, Alternate CSS URL)
- Inline CSS in the Master Page and Content pages
- Custom CSS loaded from a Content page using the content place holder “PlaceHolderAdditionalPageHead”
- Calendar CSS style sheets calendar.css and datepicker.css. Like CORE.CSS, there is one of these for each language installed. For English the location is C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
Solutions?
- Edit CORE.CSS, CALENDAR.CSS and DATEPICKER.CSS on the servers. (bad idea – see below)
- Create a new Theme and deploy to the server (good idea if you have access to the server’s drive C:)
- Create your own style sheets and deploy them to your own libraries (that’s what we will describe here)
So, lots of places to look at and possibly edit. Where do you start? With CORE.CSS.
Where are these loaded by SharePoint? If you look in default.master you will see the two linked CSS files are loaded in the <HEAD> section of the Master Page:
<SharePoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
These custom SharePoint elements get expanded at runtime to a path with the detected language’s ID:
<link rel="stylesheet" type="text/css"
href="/_layouts/1033/styles/core.css?rev=…"/>
<link rel="stylesheet" type="text/css" id="onetidThemeCSS"
href="/_themes/Citrus/Citr1011-65001.css?rev=…"/
(Note the order they are loaded (or cascaded))
If you are looking at the source of a calendar page you will see two more CSS files:
<link rel="stylesheet" type="text/css"
href="/_layouts/1033/styles/calendar.css?rev=…"/>
<link rel="stylesheet" type="text/css"
href="/_layouts/1033/styles/datepicker.css?rev=…"/>
<link rel="stylesheet" type="text/css"
href="/_layouts/1033/styles/core.css?rev=…"/>
<link rel="stylesheet" type="text/css" id="onetidThemeCSS"
href="/_themes/Citrus/Citr1011-65001.css?rev=…"/
It is not recommended to modify CORE.CSS as it will most likely get updated with service packs and patches. You will need to create your own CSS file as load it (cascade it) after the list above. One way to do this is to make a copy of CORE.CSS. (See the example steps below)
Where to Store your Custom CSS File
- If you have access to the SharePoint web servers then you can store your final design here: C:\program files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\STYLES
- If you are using MOSS publishing sites you can upload the CSS file from Site Actions, Site Settings, Master Page, Alternate CSS URL
- A library in your site – This is great for testing and for final deployment when you don’t have access to the SharePoint web servers. Note: you will want to customize the access rights to this library to make it View Only for all except for the Site Administrators.
Now to change some fonts:
SharePoint defaults use a mixture of Tahoma and Verdana fonts. In this quick example we will change them all to “Comic Sans MS”.
CORE.css
First we need a copy of CORE.css. Why? All of the style names used in the out of the box SharePoint pages are defined there, over 800 of them. Most are named “ms-xxxxx”, but others have names such as “srch-xxxxx” and “Userxxxxx”. Some of these definitions will be superseded by styles with the same names in the selected site theme.
There is no single style used to set the font. You will need to use search and replace to update a large number of styles.
Note: To reduce the size of these frequently download files you could remove all of the CSS sections for your custom CSS file that do not have font references.
To get a copy of CORE.css:
If you have access to your server you could look here:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES
(Note: 1033 is for the English version)
Or you can grab a copy via the browser:
- Open a browser and go to:
http://yourserver/yoursite/_layouts/1033/styles/core.css - Click Open to open in SharePoint Designer (or click Save if you would like to have a local copy)
- Once in SharePoint Designer click File, Save As and save the file to your testing library in your site. (mycore.css)
- Now do a Search and Replace and replace tahoma with "Comic Sans MS". (include the quotes as there are spaces in the font name!) I get 66 replacements!
- Repeat the search and replace and replace verdana with "Comic Sans MS". (include the quotes!) I get 90 replacements!
- In your default.master (or any test page, or inside of a testing Content Editor web part) add a link to your style sheet. If updating a master page, add the link anywhere after any existing CSS or Theme links.
This example assumes you have uploaded the CSS file to a library in your site.
<SharePoint:CssLink runat="server"/>
<SharePoint:Theme runat="server"/>
<link rel="stylesheet" type="text/css"
href="/sites/test/Shared%20Documents/mycore.css" />
Now display a page from your site and see if the fonts have all changed.
Now go to the calendar page. You will see that most fonts are updated, including some in the calendar. You have more work with the calendar style sheets to complete your edits. Repeat the steps above for calendar.css and datepicker.css. Get copies of the files, save them to your library (or the web servers), search and replace to change the fonts. Then add two more links:
<SharePoint:CssLink runat="server"/><SharePoint:Theme runat="server"/>
<link rel="stylesheet" type="text/css"
href="/sites/test/Shared%20Documents/mycore.css" />
<link rel="stylesheet" type="text/css"
href="/sites/test/Shared%20Documents/mycalendar.css" />
<link rel="stylesheet" type="text/css"
href="/sites/test/Shared%20Documents/mydatepicker.css" />
Note: You could merge all three of your custom style sheets into a single file and only link to it.
Changing Font Size
The same steps used above can be used to change font sizes, but there are 26 different font sizes defined in CORE.CSS alone.
| font-size:.68em; | 4 |
| font-size:.6em; | 1 |
| font-size:.7em; | 6 |
| font-size:.85em; | 1 |
| font-size:0.7em; | 3 |
| font-size:0px; | 2 |
| FONT-SIZE:1.0em; | 7 |
| font-size:1.2em; | 2 |
| font-size:100%; | 2 |
| font-size:10pt; | 4 |
| font-size:10px; | 1 |
| font-size:11pt; | 1 |
| font-size:120%; | 1 |
| font-size:12pt; | 2 |
| font-size:150%; | 1 |
| font-size:16pt; | 3 |
| font-size:1em; | 4 |
| font-size:1pt; | 3 |
| font-size:1px; | 1 |
| font-size:200%; | 1 |
| font-size:2px; | 6 |
| font-size:65%; | 1 |
| font-size:7pt; | 2 |
| font-size:80% | 1 |
| font-size:8pt; | 115 |
| font-size:9pt; | 4 |
| Grand Total | 179 |
Font change thoughts and recommendations:
- Most of the font sizes in core.css are absolute (pixels or points) and this prevents users from using the browser Text Size features to make a page easier to read. (do a web search on “SharePoint accessibility”)
- You will have to do a lot of testing! Especially to find where there are hard coded font sizes in some pages and web parts.
For a great design resource and detailed information on customizing SharePoint using CSS see: http://www.heathersolomon.com/content/sp07cssreference.htm
.
5 comments:
Mike,
I have a different font issue in Sharepoint. I don't want to change the fonts used in presentation or display. I have a need to use a new TT font in the various user input sections, such as Announcements. The fonts available are the standard set. I've installed the new font on the web front end server, and also my own workstation. When I pull up Word or Notepad, the font is available. But within SharePoint, the web parts which allow font changes do not have the new one.
How can I get Sharepoint (MOSS2007) to see this newly added font?
Thanks,
Keith V.
Keith,
I don't any direct answers for you, but here's some of the pieces that may help.
You may want to post your question here:
http://social.msdn.microsoft.com/Forums/en/sharepointcustomization/
There are two parts to your question:
- getting the fonts to your users
- letting the user select the font in the SharePoint rich text editors
For the first part you can install the fonts on all of your user's machines. Are they all on the corporate network where you have control of what is installed on every machine?
Or, you can embed fonts in via a stylesheet. This only works with certain versions of browsers (Example: Firefox 3.5 or later). Also there are legal issues with most commerical fonts and embedding.
Some links:
CSS Tip: Get Any Font You Want
http://www.netmechanic.com/news/vol3/css_no15.htm
Font Embedding
http://msdn.microsoft.com/en-us/library/ms533034(VS.85).aspx
https://developer.mozilla.org/en/CSS/@font-face
http://www.w3schools.com/browsers/browsers_stats.asp
http://www.w3schools.com/browsers/browsers_firefox.asp
Now for the second part.
In the built-in rich text editor you can modify the "styles" list by adding new CSS styles to the site.
http://office.microsoft.com/en-us/sharepointdesigner/HA101741401033.aspx
You can also add buttons to the built-in editor (to add your font?):
http://vspug.com/mossman/2007/05/07/how-to-add-a-button-to-the-html-editor-control-in-sharepoint/
For more flexibility (and FireFox support in general) consider this replacement: Telerik RadEditor Lite for MOSS
http://www.telerik.com/sharepoint
They may have an answer to your questions here: http://www.telerik.com/community/forums/sharepoint-2007/lite-editor-for-moss.aspx
Mike
Hello,
I'm in SP 2010, I've inserted a Content Editor Web Part, and within that CEWP, there's a table. I only want to change the font size of the text in that one table, but SP won't let me do it - not with the WYSIWYG editor, and not in the HTML source; it ignores all input. It will change the font size of the text outside the table, but not the text in the table...what am I missing? I used to do this all the time with just the WYSIWYG editor...surely I don't need to get into the CSS? Thanks,
Jill
We are using SharePoint 2010 for our Intranet and I was asked the following question “Is there any way to control or change the Styles, Paragraph and Markup Styles? I can provide screen shots.
Ranger,
See if this helps:
http://onlinecoder.blogspot.com/2011/07/customize-styles-and-markup-styles.html
Mike
Post a Comment
Note to spammers...
Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.