How would I go about changing the font of my title in the visual editor? and also the font size
Change Font Visual Editor Title
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Oliver
Thanks for reaching out.
Content font size can be set from Appearance > Customize > Fonts > Content Size. Heading Font can be set from the same panel within the Customizer.
Let us know how you come along with that.
Thanks for the response but I believe this changes the font of the text in the actual site, I just want to change the font size of the title’s of this visual editor found here http://www.primitivecreations.tv/232-2/ Where you see it says UVN, I just want to change that font and size and maybe even color, and I’d like to do so for my other work samples pages as well
Hi Oliver
In your visual editor widget, click on the attributes option on the right and give the widget a unique class name.
Go to Appearance->Custom CSS and add this
.myclass .widget-title { font-size: 23px !important; font-family: "Times New Roman", Georgia, Serif; } .myclass .textwidget { font-size: 16px !important; }Change the myclass name to your unique class name, font sizes to match what you want and the font family to the style you require. Here is a list of all the web safe fonts you can use.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
You should use two or three fonts in the statement as fallback insurance to ensure the text will still display with the same or similar style on all devices/browsers.
Let us know how you get on
Magus
Okay I tried it out but it doesn’t seem to be working the way I would expect it to. the name of the font that I want to use is called “Open Sans” and I would like it in Bold and Italic, When i applied the code it seems that the body along with the tile have changed font and size, not that its a problem its just that I only want it to effect the titile.
http://www.primitivecreations.tv/232-2/
titleStyle .titleStyle .widget-title { font-size: 23px !important; font-family: "Open Sans" } .titleStyle .textwidget { font-size: 12px !important; }oh and also everytime I hit update my apostrophes change into what you see in the code "
Hi Oliver
I use this system myself so it should not affect anything apart from the targeted widget.
Can you please add the changes back to the site and I’ll look at it live and see if there is anything overriding the changes.
Let me know when your ready
Magus
ok its up
Hi Oliver
It looks like you have added the CSS into the widget CSS area. Please remove all entries from there and add the original code posted, with your changes to the custom CSS page by navigating to Appearance->Custom CSS.
Hope this helps
Magus
ok I made the change but now when I try to change the font to the title nothing seems to happen, the same for the font also
Hi Oliver,
Nearly There.
In Appearance->Custom CSS please remove the line which reads
Go to your UVN page and edit the widget. In the attributes section enter textwidget for the class name and click done and update the page.
All should now be well.
Magus
Hi Oliver
Sorry, made a mistake, the line in your custom CSS you should remove is the one that just says
and titlestyle is what you should enter as the widget class in attributes.
Apologies
Magus
Great it Works! Now I’m gonna be a bit picky lol, is there a way to have my Title text gradient between black and orange?
Hi Oliver
Excellent, glad you got it working. Unfortunately there is not a way to give you gradient coloured text which works in all browsers. The only option is for webkit based browsers, so in everyday terms that means Safari and Chrome. Everything else will display the text in black with a slight shadow.
I don’t think MS browsers and Mozilla browsers will eventually catch up as this function has been around for 4 years already for webkit and the others have not worked on it yet.
Hope this helps
Magus
hmm okay, Do you think its possible to use an image and place it right where the Title Text Would be?
You could use an image but you would need to use a fixed size to keep it from changing as your site is responsive.
Using the visual editor in the text widget you can use the add media button, remove any destination URL setting from the select media page before adding and centering it in the widget.
You would then need to delete the text in the widget title and remove this section from your custom CSS
.titleStyle .widget-title { font-size: 23px !important; font-family: "Open Sans" }Hope this helps
Magus
Hi Oliver
How you looking on this thread? Quick follow-up from our side. Let us know if we can assist further.
Yes I am good, it works
Cool, glad to hear you’ve been making progress.