How To Use Google’s Free Web Fonts On Your Site
The right typography can really bring a design together. Google provides a repository of free fonts for use across the web. Why should you consider changing the stock fonts of your Magento Go theme? Using a bold, sans-serif font with smooth lines and curves is a very effective way to convey a high-tech design on a technology retail site like Apple’s. A font with a flowing formal, natural handwritten look is a great match for sites that retail makeup products, dolls, and girls’ toys, because it is something we identify with these items from other brands we encounter. Would you like to use one of Google’s free fonts on your website?
Select the fonts you’d like to use by clicking on “Add to Collection”. At the bottom of your screen, you’ll see a bar that tallies the number of fonts you’ve selected; on the right side, click the “Use” tab. This takes you to the review page, which contains 4 steps necessary to install the fonts on your site. Skip to step three, “Add This Code To Your Website”, where you’ll see three tabs –copy the code there and paste it in your Magento Go store under System > Configuration > Design > HTML Head > Miscellaneous Scripts.
Using the developer tools from above, find the text you want to change, add a new line of code and type in “font-family:” (without the quotes) and hit the tab key; then, refer to step four of the Google Fonts page and copy the font name (with the single quotes) that comes after that and drop it into the box that pops up. Your code should look similar to the highlighted section in the image.
If you’ve made your changes correctly, your text (the Product Title in our example) should look like our sample image. Copy the code into your Magento theme according to the steps we laid out in our “Custom Background” section above, remembering to add a title to your new changes via CSS comments.
Rounding Your Corners with CSS for a Clean, Contemporary Look
If you’re looking for that last bit of extra “flair” to make your site stand out, nothing produces a touch of modern style quite as easily as adding a bit of rounding to your image or button
corners. There is perhaps nothing quite so readily associated with modern web design as rounded gradient buttons. Rounded buttons are used extensively online, from PayPal’s iconic rounded yellow “Buy Now” button, to Apple’s smooth glossy rounded buttons.
Rounded buttons became popular as monitor resolutions and connection speeds increased, allowing higher fidelity graphics to become the standard of “Web 2.0” design. Rounded corner designs have become such a prominent design trend that the language has even translated over to real world products. Apple’s iconic mobile product lines have been using rounded corners since 2001, with the launch of the iPod, which stood in stark contrast to the bleak, hard-edged slabs that represented the MP3 player market at the time. This design language reached its peak with the introduction of the iPhone, which had no rivals in design at its launch, and the trend has spread since.
So, how can you add some Apple suave to your website? This process is very simple –using our developer console training, locate the button or image you want to add some rounding to. Mousing over the HTML codes in the left panel will highlight that element on the web page. Once you’re sure you’re on the right element, in the right panel of the developer tools, add the following code: “border-radius” and hit the “tab” key. In the new box, add “10px”, and you’ll see the corners of your buttons or images round. Your code should look like the example. If you’ve applied these CSS changes correctly, your elements should look like the example image below.
Make sure that you copy the code and add it into the theme in the design backend under Design > Themes Editor > CSS Editor. Remember to label your changes with CSS comments as we discussed in the opening of this article. Once you save your work, your changes will be live on your site. Congratulations!
We’ve covered a lot of ground in this post, and our hope is that you can put these tips to use improving your store, increasing your sales with a custom design that speaks to your audience. For more information on rounded corners, check out these excellent guides from Smashing Magazine and CSS Tricks. Stay tuned for more tips to improve your store through design and sales best practices.
