O'Reilly logo

PrimeFaces Theme Development by Sudheer Jonna, Andy Bailey

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Changing the initial font and font size in your theme

One of the first things that a website owner specifies is the font, or fonts, that they want to use in their website. Together with the logo and the foreground and background colors, these are generally the things that they want their visitors to see.

Changing the font characteristics of your theme is also the easiest place to start.

First, locate the CSS rules that set the font family. We open the theme.css file and search for font-family. My editor shows that this is defined by just two rules —ui-widget and ui-widget button.

In moodyblue2, the rules look like this:

.ui-widget {
    font-family: 'Segoe UI',Arial,sans-serif; font-size: 1.0em; } .ui-widget input, .ui-widget select, .ui-widget textarea, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required