Text effects in Web Studio
Web Studio 5 Tutorials and Add On's - supporting you take your website that next step

Using google fonts

 Remember to donate if you use a tutorial - Thank-you for help with maintaining the website and for understanding my time

SEE THE CSS CATEGORY FOR TEXT BASICS

Importing Fonts into Web Studio
Quality typography for web pages as an option to using web safe fonts
or images of fonts which can't be read by search engines
Search: Web Safe Fonts

WHAT ARE WEB SAFE FONTS
Browsers can only use the fonts installed in each computer, so every visitor to your web site needs to have all the fonts you want
 to use installed in their computer. Since all computers will have different fonts installed, we use a set of fonts that are usually
put there by the computer manufacturer or are the default sets of fonts for the operating system we call them "web safe fonts".

WHY USE WEB SAFE FONTS
You may design your website using an un-common font and on your computer it will look great.
When it is live on the internet there is a good chance it won't,
your visitors computer will use the default font and it may even throw off your layout.

Example of a web studio page using google fonts
Google Font Example

Setting up web studio

Remove the checkmark in web studio's option to make non web safe fonts into images
I do this anyway so I have the choice and it's not done by default

Click on Website Properties in Miscellaneous uncheck
Convert objects with Non-Web-Safe fonts into a graphic

If you don't see Website Properties got to the View tab
and click on Caption Bar in
Show/Hide

Go to the google fonts page and select the font you want to use on your page
Google Fonts Page

Once you found the font you like click on Quick-use button

Select the style in step 1, then skip down to step 3 and on the standard tab

Go to the HTML tab in Insert Page HTML select Inside Head Copy/Paste the link provided

Press "OK"
to save

COPY/PASTE
the link

That will look like this depending on the font you chose, this one is Lobster like in the google font example

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

In web studio place your text object, type in what you want then align it to center so you get a <P> tag
You can align the text again after how you like.

<P style="Paste step 4 here">

Select the text object then on the TEXT tab in "Clipboard"
select "edit HTML" and replace the <P> tag with this

In web studio keep the text editor open, and at google font copy the code from step 4
and paste it so it replaces the above text between the quotations like this:

Press "OK"
to save

COPY/PASTE
the font style

<P style="font-family: 'Lobster', Georgia, Times, serif">

Now you can use web studio like you always do to change the color, size of the text, bold etc.
When you preview you will be able to see the size the font you selected renders and
adjust the size using web studio until you get it to look how you like.

Preview your page

Thank-you

Text effects in Web Studio 5 - Using google fonts - by Web Studio Next

aaaaaaaaaaaaiii