Text appears in lots of places on a website, and ProPhoto puts you in control of the appearance of text through the use of font styles. Find all of the font styles in your design within the left sidebar of the Visual Builder screen.
Each font style used in your website design can be applied to text modules, the content of your posts & pages, the title and excerpt found in a grid, the layers of a tile graphic, the labels or fields in a form, and plenty more.
A font style gives you control over several appearance options in a single font preset:
font family
font size
color
bold
italic
underline
line height
word spacing
letter spacing
font casing (capitalization)
You can edit these options in one place so that all text using your font style will be updated at once. This saves a lot of time over hunting down and editing each bit of text just to change a font or a color. You can also override the look of links within your text in a font style.
Select a topic below to learn how to put font styles to use in your website design.
Default font styles
Every design created after the 7.7.x update will come with default font styles set up in Font Styles > Defaults. If your design was created prior to 7.7.0 you can manually set them up.
These are global default styles for different types of text – paragraph, h1 through h6, menus, blockquotes and list items. Font defaults will inherit sensibly throughout your site. Managing these first can save a lot of time when changing up the look of your site’s typography. Edit the default font style and you’ll see those changes everywhere that style is inheriting. For example, “normal” text (HTML paragraphs) will receive the “body text” default font style. If you edit the default style set for body text every text module still inheriting the default will get the change. If the text is set to be an H1 it will receive the default H1 font style. It’s your choice whether you leave the defaults in a module as they are or override theme with a different font style.
In this text module, normal text is receiving the default body text font style and h1 test is using an override style.
Every font selector in the Visual Builder will receive a default font style automatically. In each area you can leave the default or choose something else.
Every font select can show a default or override font style
Create and edit font styles
Visit the Font styles area while customizing a design in the Visual Builder interface.
Create a new font style
When you want to create a new font style from scratch, you can click the + NEW button and select any font family, size, and other style you want.
Once a font style has been created, you can set it up with any appearance you like. Then, that style can be set as a default font style or applied as an override style on a particular module on your site. (see the section below for applying font styles)
Edit an existing font style
ProPhoto designs typically come with plenty of font styles that have already been set up for you, so most of the time you will simply click to edit an existing font style. See a demonstration of a font style being edited for the menu in this clip:
In the case of a navigation menu, the “link” appearance of the font style is important, so the link tab is used to modify color and underline styling of that text.
Copy an existing font style
If you have a font style that is already setup but you need a new copy that is a bit larger, smaller, different color, or has some other changes applied, you can save time by clicking to copy a font style you already have. Then, you can give the new copy a sensible name and make edits to the appearance before applying the new font style in your design. See a demonstration of copying a font style in this clip:
As you might have guessed, new copies of a font style are the safest way of editing the appearance of text on your website design because changes you make will not impact other text on your website. This is because the newly copied font style will not be applied anywhere except the text item you were working with.
When you need to modify one particular module or text type, a copied font is an easy way to work. Of course, if you have other text which should use that newly copied font style, you will need to apply the font style to other text seen in your layouts.
Apply font styles
Each font style that exists in your ProPhoto design can be applied to text, and there are different bits of text all over your website design. Text might appear in places like:
text layers in a logo, button, etc. graphic that was created within a tile design
title text, excerpt text, or “read more” links in a grid module
Text modules
Text modules will show the default font style for each text type. If the default style won’t work, edit the module and select a different font style for the text type you are using.
Different types of text can show different font styles (headings, normal, lists, etc) in the same text module. But it is not possible to apply different font styles to particular word or phrases within a single text module.
Tiles
Tiles can appear in a graphics module – when you edit a tile in the Elements > Tiles area, the tiles editor provides a font selector for each text layer in the design.
Menus, content, and other modules
Other modules have a “gear” edit button which opens a settings popup where fonts and text styling can be selected:
Regardless of the module you are working with, font styles can be set in one of these ways.
Choosing Google fonts
Hundreds of free Google fonts are available for use in your website.
When you create or edit a font style (see above) you may select a font family from a huge list…
You may quickly find fonts by typing a name or by using the Filter/Add fonts area, seen in this demonstration clip:
The filter options make it easy to hide the different categories of fonts you can choose from:
User Uploaded
Serif
Handwriting
Sans Serif
Display
Monospace
If you choose a font that you would like to use for other purposes than your website, you can visit the Google fonts website to find and download the same font for use on your computer.
Upload custom font files
If you have a font which is not available through the normal Google fonts system, you can also convert fonts you own to .woff format. These files can be uploaded into the WordPress Media Library for use in ProPhoto, or they can be uploaded directly in the Font Styles sidebar.
First, confirm that you have a valid user license to use your font on a website. Fonts you have purchased may not be licensed for use on a website, and we certainly don’t want you to be sued by a font creator for using their creation illegally. Even if you download a font for free on the internet does not necessarily mean you can use it on a website, so check for a user license before using your font.
If your font is in .ttf, .otf, or another format you must first convert your font to the web-friendly .woff format.
You may use a software tool downloaded to your computer, or you may use an online font converter tool of your choice – just search for “convert font to woff” and you are sure to find several good options.
When you have a file that is in the .woff format on your computer, drop it into your “Media > Library” area of WordPress or into the font family > Filter/Add Fonts area. The font will become available for selection in the list.
To find the fonts you have uploaded into WordPress, use the Filter/Add fonts area, seen in this demonstration clip:
Leave only the User Uploaded option checked to see all custom fonts for selection.
