How to have 2 fonts on same line

function change_style( $atts, $content = null ) {
	extract( shortcode_atts( array(
		'class' => 'myCustomstyling', // class name in css
		'link' => '1', // link to pdf

	), $atts ) );

	return '<span class="'.$class.'"><a href="'.$link.'">' . $content . '</a></span>';
}
add_shortcode( 'bigfont', 'change_style' );

//put the above code to your functions file
//put the live below in editor, this will not effect the sryling and add the custom style name to your style sheet too and define what ever style you want.
[bigfont class=heading link=https://linktopdf.com]Apple[/bigfont]

Thank you all. I see functions.php in the edit theme area on WordPress. Should I put the code above into the Appearance, Customize area under Custom CSS?
Otherwise from what I read when I would upgrade the Theme, the changes wouldn’t be saved?
It also talks about a Child Theme but I am not sure where that would be.

Thanks again.

yes with the code above if you upgrade the theme the changes will be lost.

However if you wish to add a child theme to your wordpress.
The structure will be like this.
themes/yourtheme/
themse/yourtheme-child/

in(themse/yourtheme-child/) you must add style.css with following code.

/*
 Theme Name:     Your Theme Name
 Theme URI:      https://example.com/ Your Theme URI/
 Description:    Your Theme Description
 Author:         ABC
 Author URI:     https://example.com
*/

@import url("../yourtheme/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

And to add the shortdcode mentioned in my previous comment also create (themse/yourtheme-child/functions.php) Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php.

If you still need help you are welcome!. oR Kindly Set the Topic status to resolved ??

Boy, that seems to be an awful lot of work for something that could just be done using CSS.

The reason why your descriptions are breaking to a new line is because you are using heading (H) tags (e.g., H1, H2, H3, etc). Heading tags are defined by default to be “block” level elements, meaning they appear by themselves in their own block. Other block level elements are DIV and P (paragraph).

What I would do is create some CSS rules and assign classes to the different anchor tags. For example, you could define these CSS rules:

.fruit {
   font-size: 26px;
   font-weight: bold;
   display: inline;
}
.apple {
   color: #ff0000;  /* Red */
}
.orange {
   color: #ffa500;  /* Orange */
}
.kiwi {
   color: #00ff00;  /* Green */
}

So the above rules defines styling that’s common to all “fruit” class elements, and then individual styling for each class of fruit. The display: inline property means to display the element as inline instead of block (in case you wanted to use it as part of a heading).

Then in your code, you would assign the different classes to your anchor/link elements like this, you wouldn’t even need to use heading tags:

<a class="fruit apple" href="https://www.pdservices.com/pdf/FactSheetProfileXT.pdf" target="_blank">Apple</a> - a red or green fruit
<a class="fruit orange" href="https://www.pdservices.com/pdf/FactSheetPSA.pdf" target="_blank">Orange</a> - an orange fruit
<a class="fruit kiwi" href="https://www.pdservices.com/pdf/FactSheetCSP.pdf" target="_blank">Kiwi</a> - a green fruit.

What’s nice about this approach is that you only need to change the font styling (size, weight, font family, etc) in one place to affect all of the fruit class elements, and then each individual fruit class has its own color.

You can even apply the classes to other elements:

An <span class="fruit apple">apple</span> a day keeps the doctor away.

If you just wanted to affect the color but not the size, just use the apple class, for example:

An <span class="apple">apple</span> a day keeps the doctor away.

If you wanted a different size for h4 headings, you could add this rule, for example:

h4.fruit {
   font-size: 32px;
}

Then in your post, you would just add the fruit class to your h4 tag:

<h4 class="fruit kiwi">Kiwi</h4>

As noted by cgxsdream, you do not want to make changes to your theme’s CSS file. If your theme does not have a custom CSS option, you can add the CSS using a plugin like Lazyest Stylesheet or Custom CSS Manager.