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.
In this font styles library, all of the design's font styles are listed in alphabetical order as named. Additionally, each font style is listed with its particular font size setting shown and the name is rendered using the appearance settings applied to that particular font. This is to help assist you in locating specific font styles more easily.
Each font style 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)
Font styles also allow you to customize the appearance of links, hovered links and visited links.
In ProPhoto, you can edit these options in one place so that all text using a particular 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. (But, if you ever want to override the font appearance of particular text in your design, ProPhoto makes it very easy to so with its font override options.)
Learn more about the font style options in the sections below.
Create a new font style
Visit the Font styles area while customizing a design in the Visual Builder interface.
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.
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.
As you can see, when you make modifications to the font style, the changes are shown directly in the Visual Builder.
Copy or delete an existing font style
If you would like to create a new font style, based off a pre-existing font style, you can do so by clicking to copy:
This can be helpful if you want to create a new variant of an existing font style and use it in multiple locations within your design. However, if you are simply wanting to override the color or size of a particular font style in a particular location, we suggest utilizing the font override options instead of creating a new font style.
To remove a font style you no longer need, simply click the delete icon.
Links, hovered links and visited links settings
When creating or editing a font style, make sure to note the tabs available to control the font style's appearance when the text is plain text, a link, a hovered link or a visited link.
So for example, if you have a link within a text module, you can modify its appearance using the tab in that font style.
Using 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 the list show. Or, you may quickly find fonts by typing a name or by using the Filter/Add fonts area.
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.
Uploading 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.woffformat. 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
.woffformat 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, and leave only the User Uploaded option checked to see all custom fonts for selection.
Comments
0 comments
Please sign in to leave a comment.