Web Studio Next Using Google Fonts
Web Studio Next
$5.00 to help keep this site up and running would be very much appreciated
This tutorial is going to show you how you can import fonts into web studio using google fonts.
It will provide you with an option to using only web safe fonts or text images which can't be seen by search engines.
If you are not familiar with web studio refer to the instruction page
Importing Fonts into Web Studio the Easy Way
Fancy text without the Image
Google Fonts now have a pretty good selection of font styles we can use and have a site set up where we can get them. I'll show you how you can use those fonts inside web studio. Every browser loads the fonts a little differently so have a look at the example and see what think. FireFox for example can produce a quick flash of un-styled font. Don't import too many different fonts on one page.
Setting up Web Studio
What are web safe fonts anyway?
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".
Some (really) older computers may not have a few of the fonts, but they are a minority.
Click on Website Properties in Miscellaneous uncheck
Convert objects with Non-Web-Safe fonts into a graphic
Putting the CSS in your text
Once you found the font you like click on Quick-use
In web studio paste that inside HEAD and press OK to save
Go to the HTML tab in Insert Page HTML select Inside Head
Paste the CSS from google into the style tag like this:
Scroll down and select the Javascript TAB
Select your Font and Code at Google Fonts Website
In web studio put your text on the page and to get a "style" tag in it change the size, you can change it later we just need that tag.
Now select edit HTML
Go to the TEXT TAB in clipboard select Edit HTML
Scroll down and select the CSS it will look something like this:
Preview and position the text
You can change the color and size with web studio and when you preview to see it work you'll probably see it move a bit.
You have to move it around and use preview to get it just right but if you have ever tried to set up importing fonts this is way easier.
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.
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