Changing SharePoint 2010 default font size

By default, SharePoint 2010 font size is Verdana 8pt and how do I change the font size?  What if I want to change the font size to something like Arial 13?

How do I make it Arial as a default font in SharePoint 2010 content editor web part so that every time user edit contents, it default not to Verdana?

Here are the steps to change default font size in SharePoint 2010

1. I am using the CSS from Serve’s Blog Copy this CSS and create a new CSS file in SharePoint Designer or download from below

.ms-bodyareacell td, .ms-bodyareacell p, .ms-bodyareacell div, .ms-bodyareacell span, .ms-bodyareacell p, .ms-bodyareacell a,.ms-bodyareacell a:active, .ms-bodyareacell a:hover, .ms-bodyareacell a:link, .ms-bodyareacell a:visited,.ms-bodyareacell td,.ms-bodyareacell div, .ms-bodyareacell font

{ font-size:13px; font-family:Trebuchet MS,Verdana, Arial; letter-spacing: normal; color:black; }

.ms-bodyareacell h3 a, .ms-bodyareacell h3 span, .ms-bodyareacell h3 div,.ms-bodyareacell h3 p, .ms-bodyareacell h3 font { font-size:15px; color:black; }

.ms-wpheader { background-color:#e9e9e9; }

2. Save your CSS file. In this case, I am calling as custom2.css and saving this file in style library

3. Open your master page and add a reference to your new custom2.css file

4. Now go back to your SharePoint page and edit. You will see your default font is changed to what every you specified in your CSS

This is how you can change SharePoint 2010 default font to something you like.

 

SharePoint’s Rich Text Editors (RTEs) are a great feature: they allow users to style text without having to know HTML and CSS.

But sometimes they provide *too* many options. Users can choose any font, font size and color they wish. They can add background colors to text. Left unchecked, your website could end up looking like an old MySpace page, a riot of clashing fonts and colors. So much for brand identity.

On the flip side, it’s not always easy for users to conform to brand identity. Picking your brand colors requires manually entering the color value. Font and font-size specs must be manually followed. Mistakes are easy to make.

SharePoint lets you fix both problems at once with custom RTE styles. You can replace the default choices with custom ones. If your brand uses custom colors, you can define them and let users select them from a dropdown. Doing so prevents users from selecting unauthorized colors, while making it easy for them to use the correct ones.

You can also create custom CSS styles that let users apply complex styling to elements — letting them instantly create a fancy button, for instance, without knowing any CSS. Or you could define a headline style to ensure that all headlines are the proper font, size and color.

The good news

1. SharePoint includes a built-in method for replacing the default styles with custom ones, using a custom prefix.
2. You can also just override the default styles with your own versions, or add additional styles to the default ones.
3. You can also selectively deactivate various RTE panels.

The bad news

1. Custom prefixes are an all-or-nothing choice. If you go the custom prefix route, you either replace *all* the default styles with custom ones, or you replace none. Implementing a custom RTE prefix wipes out *all* default styles, including image styles, table styles, the font and font-size menus, etc. You may or may not care, depending on your goal. But once you go with a custom prefix, any default styles you want to keep will need to be redefined with your custom prefix.
2. Custom prefixes are applied on a part-by-part basis. SharePoint is full of RTE editors, and each one is independent. There’s no central place where you can say, “Use my custom styles in all RTEs”. Even the JavaScript workaround I outline below isn’t successful at touching every RTE.
3. You can’t deactivate *part* of an RTE panel. It’s either the whole panel, or nothing, unless you use CSS.

Discouraging, huh? Don’t worry. It’s less painful than it sounds. Let’s go through it piece by piece.

The basics

SharePoint knows what to include in the dropdowns by looking for a specific prefix in CSS style names. The default prefix is “ms-rte”. So any class name that starts with “ms-rte” will be included in a dropdown.

SharePoint knows which dropdown menu to put the style into by looking for a menu name immediately after the prefix:

• Style: “Styles” menu. These are styles typically applied to parts of a block-level element. It wraps the selected text in a <span> tag with the assigned class.
• Element: “Markup styles” menu. These are block level styles, like “paragraph”, “headline”, etc.
• FontSize: “Font Size” menu
• FontFace: “Font Face” menu
• ForeColor: “Font color” menu
• BackColor: “Highlight color” menu
• Image: “Image” menu
• Table: “Table” menu
• Position: “Position” menu

Finally, you need to tell SharePoint what text to show in the menu. You define this with a custom CSS property called “-ms-name”.

For example:

h2.ms-rteStyle-steverocks {

    -ms-name:"Steve rocks";

        color:green;

}

Would put an item named “Steve rocks” in the Style menu. Choosing it applies the class “.ms-rteStyle-steverocks” to the selected text, which would turn the text green.

Best practice is to separate the prefix from the actual properties, like this:

h2.ms-rteStyle-steverocks {

    -ms-name:"Steve rocks";

}

.ms-rteStyle-steverocks {

        color:green;

}

The reason is that you want the name associated with a single style to avoid confusing SharePoint, but you’ll often have to override more than one default SharePoint style to get your style to stick. The above format lets you do that by simply stringing the classes together in the second style call:

h2.ms-rteStyle-steverocks {

    -ms-name:"Steve rocks";

}

.ms-rteStyle-steverocks, .ms-WPBody h2 {

        color:green;

}

Adding to or overriding default styles

For simple changes, you can use the “ms-rte” prefix to add new menu options or override existing ones. Your custom additions will appear at the bottom of the relevant menu. Unfortunately, there’s no way to specify the order in which things appear in the menu.

Custom prefix

If you want to wipe out all the default styles and start over from scratch, you can define a custom RTE prefix. You do this by defining a property called “PrefixStyleSheet”. SharePoint will then look for styles using your custom prefix and ignore the default “ms-rte” styles. We’ll discuss how that works in detail below.

Disabling editing panels

You can disable various editing panels by defining certain RTE properties to “False”. For example:

AllowParagraphFormatting = "False"

Grays out the buttons that allow users to indent and change the alignment of paragraphs.

AllowFonts = "False"

Grays out nearly all the text options: users cannot pick their own fonts, apply colors, apply bold, italic or underlining, etc.

Selectively disabling panels with CSS

Alternatively, you can use CSS to hide the panels or parts of panels completely. For instance, the following style hides the Fonts panel:

#Ribbon.EditingTools.CPEditTab.Font {

    display:none;

}

This style hides just the font and font-size dropdowns, leaving the font style buttons (bold, italic, etc.) intact:

#Ribbon.EditingTools.CPEditTab.Font-Large-0-0 {

    display:none;

}

Applying custom prefixes and disabling panels

As I mentioned above, there is no central place where you can define behavior for every RTE on the site. You have to either do it manually (which only works in some cases) or programmatically (which also only works in some cases). Here’s the scoop:

Manually

If you’re using a Content Template with a RichTextField Web Control, you can add the values directly into the “PublishingWebControls:RichHtmlField” tag in your page layout:

 

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" AllowParagraphFormatting="False" AllowFonts="False" PrefixStyleSheet="myprefix-" runat="server"/>

Advantage: Works every time, in all browsers

Disadvantage: Requires you to manually enter the properties in every RichHtmlField in every template on your site; doesn’t work for Content Editor Web Parts.

jQuery

You can use jQuery to make one global setting with the following code, which targets the div containing the editor:

$(document).ready(function(){

    $(".ms-rtestate-write").attr({

        PrefixStyleSheet: 'myprefix-',

        AllowParagraphFormatting: 'False',

        AllowFonts: 'False'

    });

});

Advantages: Works for both Content Templates and Content Editor Web Parts; applies sitewide

Disadvantages: Doesn’t seem to work on Content Templates in IE; requires jQuery

Dialog boxes

Some system dialog boxes have RTE editors built into them. Getting them updated is a little tricky, because SharePoint javascripts like to wipe out jQuery modifications to the dialogs.

The solution is to make sure your jQuery is the last script to touch the dialog.

Create the following script and save it in a file (for this example, we’ll name it “rte_settings_dialog.js”). Replace ‘myprefix-” with your chosen prefix:

    ExecuteOrDelayUntilScriptLoaded(rte_dialog_pub, "sp.ui.rte.publishing.js"); //for dialogs on publishing pages



        function rte_dialog_pub() {

            $(".ms-rtestate-write").attr('PrefixStyleSheet', 'myprefix-');

            $(".ms-rtestate-write").attr('AllowParagraphFormatting', 'False');

            $(".ms-rtestate-write").attr('AllowFonts', 'False');

        }



    ExecuteOrDelayUntilScriptLoaded(rte_dialog, "sp.ui.rte.js"); // for dialogs on non-publishing pages



        function rte_dialog() {

            $(".ms-rtestate-write").attr('PrefixStyleSheet', 'myprefix-');

            $(".ms-rtestate-write").attr('AllowParagraphFormatting', 'False');

            $(".ms-rtestate-write").attr('AllowFonts', 'False');

        }

Copy the file into the _layouts folder in your site. You can’t do this through SharePoint Designer. You’ll either need to go through TFS (there should be a “Layouts” folder in the “Web” project of your solution) or have a developer put it there.

Once it has deployed to the site (and not before!), copy the following code into your v4.master (since we’re affecting system pages), just before the closing </head> tag:

    <!-- Custom styles for RTE editors in dialog boxes -->

    <SharePoint:CssRegistration Name="/PathToCSSFile/RTE_styles.css" After="corev4.css" runat="server"/>

    <SharePoint:ScriptLink ID="jQueryScriptlink" Name="/_layouts/RestofPath/NameOfJQUERYfile" runat="server" Localizable="false"/>

    <SharePoint:ScriptLink ID="RTEForDialogs" Name="/_layouts/RestofPath/rte_settings_dialog.js" runat="server" LoadAfterUI="true" OnDemand="false" Localizable="false"/>

    <!-- End custom RTE styles -->

The first two items make sure your v4.master has access to jQuery and your custom RTE styles.

The last item registers your “rte_settings_dialog.js” and tells SharePoint it’s in the _layout folder.

Replace “PathtoCSSFile” and “RestofPath” with the proper paths for your site.

Once a script is registered in a ScriptLink control, the “ExecuteorDelayUntilScriptLoaded” function in your js file will work. What that does is tell your script to execute after the script “sp.ui.rte.publishing.js” or “sp.ui.rte.js” has finished running. It then triggers a jQuery function (“rte_dialog”) to write the necessary attributes into the dialog’s RTE div.

Oddly, in dialogs this gives you access to custom styles, but doesn’t turn off the formatting options controlled by “AllowFonts” and “AllowParagraphFormatting.” But half a loaf is better than none.

Converting default styles to a custom prefix

If you’ve decided to implement your own custom prefix, you’ll probably want to preserve at least some of the default styles. Here’s how.

The default RTE styles are in the following location:

Style Library/en-US/Themable/Core Styles/controls.css

Look for the section where styles begin with “ms-rte”.

The idea here is to copy over any styles you want to preserve, then rename them so that they use your custom prefix instead of the default “ms-rte”. That will make them available to the RTE, with minimal work on your part.

You can ignore most of the styles, but there are three types of styles you’ll want to look more closely at.

• “Image” styles appear in the “Styles” dropdown when inserting images. You’ll want to have at least two options: A basic border, and no border.
• “Position” styles show up in the “Position” dropdown menu. Just copy and rename the existing styles, and you’ll have five options: float left, float right, and then top, middle and bottom for vertical alignment.
• “Table” styles apply when formatting tables. As with images, you’ll want at least two options: A basic border, and no border. Even if you never intend to display borders, you’ll want a version with borders to make it easy to insert content into table cells in the RTE. You can then turn off the borders with the “no borders” option.

Re-creating styles from disabled panels

Sometimes you may want to disable an editing panel (say, Fonts) but keep some of its functionality (like, say, the ability to turn text bold). You can do this by defining a custom style in the Styles menu:

.my-prefixStyle-bold {

    font-weight:bold;

}

It’s less semantic (no “strong” or “em” tags) but otherwise gets the job done.