Use different text fonts on the same line using Elementor and CSS

In this post, we will learn how to use different fonts for the words or parts of text on the same line or same paragraph using Elementor and custom CSS code.

Check this video on how to create just that or continue reading below!

You can now have certain words or several words in the same line or the same block of text appear in a different font than the rest of the paragraph. The solution might seem non-intuitive, but it is really easy to do. It is using so called “span” elements to mark up pieces of text that can be styled differently from the rest of the paragraph. We will be using Elementor builder and just a few lines of code. So, let’s get to it!

Download Elementor Pro here.

Insert your text as you normally would using Text Editor widget

Drag and drop your text editor widget in Elementor to add some copy. Now, type your text and switch over to the ‘Text’ instead of ‘Visual’ editor in Elementor left sidebar.

IMPORTANT NOTE: If you are using CSS classes to define your text styling, this process will differ just a bit. Let’s first see how it looks like if you are editing the text directly in Elementor page, without defining CSS classes.

If you are not using custom CSS classes and you are styling the text directly in Elementor panel…

If you are not using custom CSS classes to style the text and you just want to make these text changes local, on a single place on your website, then once you’ve switched to ‘Text’ editor, simply decide which part of text you would like to appear in different typeface. Add <span> before it and </span> after it to close it. The ‘span’ marks up part of the text (or simply put, words) that you can then style differently than the rest of the paragraph, while keeping it within the same class and same paragraph. Within the <span> tag, you can then add all the properties you would like this bit of text to have using the “style” callout. You can also change its color, font size, styling etc., not just the typeface.

So for example, if your paragraph is using Arial, but you would like a certain word to use Brush Script MT, can write: <span style=”font-family: ‘Brush Script MT’;”>

different-fonts-one-line

The code for the above example could look like this:

I have some <span style="font-family: 'Brush Script MT';">fancy</span> text here.

If you are using custom CSS classes and want to make these text changes unified and global

Now, if you are using custom CSS classes to style your text and you are defining all the properties there, not directly through Elementor editor, the process is just a little bit different, but equally easy and even more practical and efficient! This is especially useful if you are often pointing out words and bits of text on your website and you want all of these to have the same styling that you can change globally from a single place.

Again, insert the text editor widget and your text. Switch to ‘Text’ editor instead of ‘Visual’ in Elementor left sidebar. After this, you need to apply the class to your span without actually needing to define any styling here in this text editor.

different-fonts-one-line-text-editor

Therefore, in Elementor editor you can write something like this:

I have some <span class="script-font">fancy</span> text here.

After adding the ‘span’ tags and assigning the class to it, just go back to your CSS editor (for example, using the Simple Custom CSS and JS plugin) and in your class definition, style these bits of text globally from one place! So within your code, you would now write .script-font to start applying the font changes to these pointed out words.

.script-font {
   font-family: 'Brush Script MT';
}

Now you can simply add the span class on multiple places in your text with that class throughout the whole website and you can easily change those properties from a single place in your CSS editor!

Online course

Ready to Learn CSS?

A step-by-step basic online course for beginners and non-coders with 50+ practical exercises to get you started with CSS.

CSS-online-course-for-beginners-banner-illustration

Download Elementor Pro here.

*This post may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale, with no extra cost to you. That way you are supporting my blog and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.

Share this post:

Leave a Comment

Related posts:

General instructions:

  1. Open the exercise in your browser and read the task and the content on the left side of the screen. 
  2. You will be editing the content on the right side of the screen.
  3. In order to do that, right click on the exercise page that you opened and go to ‘Inspect’.
  4. Go to ‘Sources’ in the top bar and if you cannot see an empty CSS sheet where you can type the code, press Ctrl + P and start typing ‘styl’ in the search bar. Then press enter to open the CSS sheet.
  5. Follow the notes on the left and start typing your CSS code to see the changes online!
  6. Important! Do not refresh the page while you are editing the code, as these changes are in preview mode only and you can see them immediately, as soon as you write a line of functioning code.
  7. Use the custom classes in the notes on the left side of the screen, as well as ‘Elements’ on the top bar of the ‘Inspect’ to target and style the classes and elements. For example, you can enable the small icon on the top left of the ‘Inspect’ window (‘Select an element in the page to inspect it’) to find the default class name of the element you want to edit, while you are in the ‘Elements’ tab.

Tips:

  1. If the code is not showing any changes, try adding the !important tag at the end of the line before closing it (before the “;” symbol) and see if it works then.
  2. Don’t forget there are usually more ways to achieve the same result. Be creative!
  3. If you get stuck, write your email address in the form on the left side of the screen and you will get the solution (CSS code) in your email.

Sources:

  1. You can find a lot of tutorials on my youtube channel. 
  2. Watch the tutorial on how to solve these exercises here.

Please check your email and stay tuned for updates on the course.

We will notify you shortly when it’s available for presale.