One of the most frequent questions we see when working with the builder is about whether the title or subtitle fonts in the header area can be changed. The answer is both Yes and No. No, it cannot be changed from within the builder itself as it is hard coded as part of your selected theme. Yes, it can be changed after you publish the site up to the server. This article will show you a way to alter the title font using Google's list of free web fonts.

A word of caution before performing this task, making any changes outside the builder are means the builder server is unaware of them. When you republish your site, all changes made outside the builder will be lost. To prevent you from having to do this over again, you will want to make note of any files you change and save a copy of them either in another directory or on your local machine as a backup. Once you republish the site, you can upload or move these files back into their original places, overwriting the builder version, to restore your desired changes.

sample of subtitleThe area we will be working with in this tutorial is the subtitle area of your template. This is text that is most commonly found under the site title. Our example use the title 'Greetings!' and the subtitle states 'This is a subtitle'. That smaller subtitle will be the one we will alter with the fonts.

 

Getting the files ready

  1. Since you will be working with your live builder site, you must first have created and published the site to your hosting account.
  2. While it is a good idea to create a backup of your website, as we will be modifying some files, the builder site can always be republished to its last saved state which will overwrite any changes you made. Still, if you wish to make yet another backup, feel free. There is no such thing as being too safe.
  3. Now you will need to log into the cPanel dashboard.
  4. From the main cPanel area, use the File Manager tool to access the area where your builder site files are published. If you are using the builder for your main domain, you will want to be in the public_html folder.
  5. You will be editing two different files in this tutorial. Locate the index.php file in the root folder of your builder and the styles.css file, which is located in the styles folder. Open each file for editing.

Getting your desired Google font code

  1. Now that we have prepared the files for editing, open a separate browser window or tab and visit the Google Web Fonts. page. There are many fonts listed here, scroll through the page and choose the Add to collection button for any that you want to keep.
     
  2. review selected Google fontsAfter selecting your desired fonts click on Review button to see the selected fonts side by side. You can see them in different sizes so you can understand how it may look on your site.
     
  3. Step One - choose the styles you wantOnce you are happy with your selection, click on Use button. This will bring you to the next phase, which has a number of steps. Step One is entitled Choose the styles you want. From your list of fonts, select the ones you want to include in the code that will be generated. As adding fonts can impact the load time of your site, there is a neat little gauge next to the list that shows how the fonts will increase load time. Obviously, selecting more options adds to the impact.
     
  4. Step two - choose the character sets you wantNext, look to Step Two, named Choose the character sets you want. This automatically includes the Latin set. If you need to use an extended character set, then you will be able to select it, if it is available for your fonts. Select the checkbox if you wish to add an avalable set.
     
  5. Step three - Add this code to your websiteNow, on to Step Three, where you will obtain the code to add to your website. There are three tabs on this step Standard, @import, and Javascript.These are for different code formats, however, we will go with the standard. Highlight the code in the box and copy it to your clipboard using ctrl+c.
     
  6. index page code editRemember the code editor screen you have open for the index.php file? Locate that screen and search for the <head> tag. Paste the code immediately after that tag, no spaces necessary. A quick example is shown below:

    <html><head><link href='http://fonts.googleapis.com/css?family=Wendy+One' rel='stylesheet' type='text/css'>

    Once pasted, save the changes by clicking the Save Changesbutton from the upper right corner.
     
  7. Step four - Integrate the fonts into your CSSAfter pasting the code in the index.php file, go back to the Google web fonts page and go to Step Four, entitled Integrate the fonts into your CSS. Copy the code displayed in the step, again with ctrl+c.
     
  8. edit the css codeFind the screen tab with the code editor for your styles.css file. Locate the line of code that begins with the .slogan identifier. Paste the copied code at the end of the line, but before the } character. There is an example below to demonstrate. Note that you may need to increase the font-size: attribute. We increased the example from 9pt to 14pt.

    .slogan { font-weight: bold; font-size: 14pt;
    font-family: Arial; color: #CDD5EA;
    font-family: 'Wendy One', sans-serif;}

    As with the index.php file, save the changes by clicking the Save Changes button from the upper right corner.

    Note: If you wish to edit the styles.css file for the title itself, perform the same action for the .company identifier.

Your new font should now appear on your website. Visit to see the results. Below is our test page showing a before and after comparison.

BeforeAfter
before the title change after the font change
Continued Education in Course Premium Website Builder
You are viewing Section 9: 313: How to use Google Web Fonts for your builder
Section 8: 302: Using the Scripts Module in Premium Website Builder
Section 10: 304: Builder This site cannot be published to the specified location
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!