It is hard to find a WordPress site where there isn’t any textual content, as written texts are the most important and most commonly used parts of the websites. Yes, people do love images and motion pictures very much. Also, it is easy to put text on a picture or in a video so it is not unusual to see people taking advantage of it and mix their texts with image elements. Since the average internet speed is much faster than it was when the world wide web was in its childhood, it is almost expected to serve the visitors with not just textual content, but with images and videos, too. But if you take care of your SEO, it is still better to use plain texts.
Choose the right font families
In most cases, a WordPress’s font families are selected by its theme designer, who know the font families that don’t just look good on a page but work well with the website’s content. Let’s face it, if a business, for example a law firm uses Comic Sans or some similar font on their website, probably no one will take them seriously, but the above mentioned font (or a similar one) might work for a website made for children.
When one is not a designer, it might not be that easy to choose the perfect font for their WordPress site, choosing one of the most popular sans-serif fonts won’t let them down.
- use 3 or fewer font families
- make sure the font size is large enough to make the text legible if you use Cursive fonts
- use the same color, font family and size with the similar tags
- set your font’s go too small or too large
- use different font families in each paragraph you have
- use a font family if doesn’t look professional, no matter how popular it is
Typography – the perfect font family
When the perfect font family has been found, the next big step is creating something like a style guide, to make sure every page gives the feeling that they belong to the same website. By this style guide, I mean that for example, every heading (which use the same strength) should be the same size, same color and they should use the same font family. Most WordPress themes contain predefined styles for headings and paragraphs.
When you use Smart Slider 3 to create a slider or a block for your website, you have the ability to customize each text individually in the easy to use Font manager which handles the settings of every single font used in the slider. The normal (where there isn’t any link on the text) and hover state can be separately customized for each text, and some layers where the links and regular texts can be used together (e.g. text layer) there is a third option, where the mentioned link can be customized.
Look and feel: adjust text styles
Using Smart Slider 3’s Font manager, you can change the color and size (both in px and em) of the font. You can set the line height, make the text bold, italic or underlined, change the text align, letter spacing or set a text shadow. Already typed the text using lowercase letters but you think it would look better using uppercase letters? You can change that, too. If you need some extra options, there is an Extra CSS field where you can insert your custom CSS codes.
When any change is made, it will be visible at the Preview immediately, so when the Apply button is clicked, there won’t be any surprises on how the text will look like.
Use of different font families
You can easily use any font family (let’s say a Google font, or a font defined in your theme), by simply typing its name to the family field. If you are planning to use this font family for other fonts on your website, you might want to add it to the preset font families, so it won’t have to be typed every time. At the particular page you can turn off the Google font loading, too. If you are not sure about the perfect font family just yet, you can preview your text in our wysiwyg editor.
If you already have a font set for a layer, and you would like to use it on some other layers, you can simply copy it.
Customize slider typography
In WordPress, Smart Slider 3’s Font manager offers a variety of predefined fonts and makes it possible to create your own. You can create a new set, where you can save your fonts which you use on your product or article sliders. As a matter of fact, if you use the same font for every heading or text layer, you can set that font to be the default font for that layer, so you don’t have to select it every time, saving precious time when you make your layers.
Reuse fonts in your sliders
Maybe there is a font that you don’t want to be the default font on the layers, but you use it on each slide of a specific slider — where you have many slides — and when the font color, family, size needs to be changed, you don’t want to go to each slide separately and change the font. Let’s face it: even thinking about going to more than 5 slides and change the fonts on them sounds tiring. The good news is that each font has an option to set them as linked so when the font is changed at any layer (at any slider), the other layers where this font was used as linked, will follow the changes. This will drastically reduce the time you would have to spend with each layer to change the fonts manually (even with the copy feature it requires a lot of work). Also your WordPress site will loading much faster with less font families.
Every font in Smart Slider 3 which uses the plugin’s font manager is responsive. If the fonts don’t look right on smaller devices, they can be adjusted using the size modifier.
If you don’t want to use the Font manager at all, you can click on the small x at the Font manager’s field and that setting will make the layer use your theme’s default font settings, so you don’t have to customize the fonts all over again.
Typography tools: fonts and styles
If you would like to give a background color, border or border radius around the fonts, you can use the Style manager, where the most commonly used features can be set visually.
How to find out about the font families used on my website?
Would you like to know which font families you use on your site? You can use your browser’s developer tool, which you can find by right clicking on the text and choosing “Inspect element”. Then simply find the font-family property.
If you aren’t that much of a tech person, here is a browser extension you can install to your Google Chrome browser, and you’ll be able to take a look at the fonts used on your site. After the installation, a new icon will be placed on Chrome’s toolbar, click on it, and hover over the font and the family name will be written out.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!