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!
The code for the above example could look like this:
I have some fancy 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.
Therefore, in Elementor editor you can write something like this:
I have some fancy 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.
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!
*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.
*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.
jonathantneal / README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| /// @alias font |
| /// @access public |
| /// @author Jonathan Neal |
| /// @group helpers |
| /// Define many font and text styles in one line. |
| /// Font weight names collected from |
| /// http://www.w3.org/TR/css3-fonts/#font-weight-prop, https://docs.webplatform.org/wiki/css/properties/font-weight |
| /// https://docs.oracle.com/javafx/2/api/javafx/scene/text/FontWeight.html |
| /// http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles |
| /// https://msdn.microsoft.com/en-us/library/system.windows.fontweights(v=vs.110).aspx |
| /// |
| /// @param $values — A combination of font and text styles |
| /// @require values |
| /// |
| /// @example scss — Basic Usage |
| /// .basic-usage |
| /// @include font( light condensed center italic slashed-zero uppercase underline 2em 1.5 500 «Helvetica Neue» «Helvetica» sans-serif ); |
| /// > |
| /// @example css |
| /// .basic-usage |
| /// font-family: «Helvetica Neue», «Helvetica», sans-serif; |
| /// font-size: 2em; |
| /// font-stretch: condensed; |
| /// font-style: italic; |
| /// font-variant: slashed-zero; |
| /// font-weight: 300; |
| /// line-height: 1 .5 ; |
| /// letter-spacing: .5em ; |
| /// text-align: center; |
| /// text-decoration: underline; |
| /// text-transform: uppercase; |
| /// > |
| @mixin font($values) |
| $font-size-list : ( large , larger , medium , small , smaller , x-large , x-small , xx-large , xx-small ); |
| $font-stretch-list : ( condensed , expanded , extra-condensed , extra-expanded , normal , semi-condensed , semi-expanded , ultra-condensed , ultra-expanded ); |
| $font-style-list : ( italic , normal , oblique ); |
| $font-variant-list : ( all-petite-caps , all-small-caps , none , normal , oldstyle-nums , ordinal , petite-caps , slashed-zero , small-caps , stacked-fractions , titling-caps , unicase ); |
| $line-height-list : ( normal , null); |
| $text-align-list : ( center , justify , left , right ); |
| $text-decoration-list : ( blink , line-through , overline , underline ); |
| $text-transform-list : ( capitalize , full-width , lowercase , none , uppercase ); |
| $font-weight-map : ( |
| extra-thin : 50 , hairline : 50 , ultra-thin : 50 , |
| thin : 100 , |
| extra-light : 200 , ultra-light : 200 , |
| light : 300 , |
| book : 400 , norma : 400 , plain : 400 , regular : 400 , |
| medium : 500 , |
| demi-bold : 600 , semi-bold : 600 , |
| bold : 700 , |
| extra-bold : 800 , heavy : 800 , ultra-bold : 800 , |
| black : 900 , |
| extra-black : 950 , fat : 950 , poster : 950 , ultra-black : 950 |
| ); |
| $font-family : null; |
| $font-size : null; |
| $font-stretch : null; |
| $font-style : null; |
| $font-variant : null; |
| $font-weight : null; |
| $letter-spacing : null; |
| $line-height : null; |
| $text-align : null; |
| $text-decoration : null; |
| $text-transform : null; |
| @each $value in $values |
| @if not $font-size |
| // font-style |
| @if not $font-style and index ( $font-style-list , $value ) |
| $font-style : $value ; |
| > |
| // font-variant |
| @elseif not $font-variant and index ( $font-variant-list , $value ) |
| $font-variant : $value ; |
| > @elseif not $font-weight and map-has-key ( $font-weight-map , $value ) |
| $font-weight : map-get ( $font-weight-map , $value ); |
| > @elseif not $font-weight and type-of ( $value ) == number and unitless ( $value ) and $value == round ( $value ) and $value > 0 and $value < 1000 |
| $font-weight : $value ; |
| > |
| // font-stretch |
| @elseif not $font-stretch and index ( $font-stretch-list , $value ) |
| $font-stretch : $value ; |
| > |
| // text-align |
| @elseif not $text-align and index ( $text-align-list , $value ) |
| $text-align : $value ; |
| > |
| // text-decoration |
| @elseif not $text-decoration and index ( $text-decoration-list , $value ) |
| $text-decoration : $value ; |
| > |
| // text-transform |
| @elseif not $text-transform and index ( $text-transform-list , $value ) |
| $text-transform : $value ; |
| > |
| // font-size |
| @elseif index ( $font-size-list , $value ) |
| $font-size : $value ; |
| > @elseif type-of ( $value ) == number and ( $value == 0 or not unitless ( $value )) |
| $font-size : $value ; |
| > |
| > |
| // line-height |
| @elseif not $line-height and index ( $line-height-list , $value ) |
| $line-height : $value ; |
| > @elseif not $line-height and type-of ( $value ) == number |
| $line-height : $value ; |
| > |
| // letter-spacing |
| @elseif not $letter-spacing and type-of ( $value ) == number |
| $letter-spacing : if ( unitless ( $value ), # < $value / 1000 >em , $value ); |
| > |
| // font-family |
| @else |
| $font-family : if ( $font-family , append ( $font-family , $value , comma ), $value ); |
| > |
| > |
| font-family : $font-family ; |
| font-size : $font-size ; |
| font-stretch : $font-stretch ; |
| font-style : $font-style ; |
| font-variant : $font-variant ; |
| font-weight : $font-weight ; |
| letter-spacing : $letter-spacing ; |
| line-height : $line-height ; |
| text-align : $text-align ; |
| text-decoration : $text-decoration ; |
| text-transform : $text-transform ; |
| > |