Not so many years ago, the world of the Internet in general and the pages that for one reason or another used web technologies (HTML and CSS) in particular, limited us to the use of just a few system fonts. This little flexibility made the sites look boring and homogeneous, very similar to each other. It was for this reason that designers and developers chose to use more flexible non-web technologies such as Flash or making an abusive use of images, with the spirit of providing differentiation and particularity to their sites.
Over time, technologies and browsers have evolved. Today thanks to the use of HTML5 and CSS3 we can do all kinds of typographical experiments on our sites. Naturally, Tiendanube is no exception. Thanks to that, we have the possibility of adding new fonts to the stores. In this post, we are going to explain what is the implementation mechanism of a typography based on two different approaches.
Important! In both methods it is necessary to enable the FTP of the stores to be able to make the changes.
Google webfont method
This method is the simplest and allows us to include any typeface in our store by making just a few modifications to the code.
Step 1
Go to and choose the font(s) you want to work with.
Step 2
Copy the code from standard quick use and paste it into the head of layout.tpl. For example, the code to include the Roboto would be:
Step 3
Finally, use the CSS typography where you prefer as follows:
font-family: ‘Roboto’, sans-serif;
webfont custom method
This method is a little more complicated, but it offers us the possibility of including almost any typeface. Many times we work with brands that already have an identity based on some font and in those cases this can be our solution so that the store and its style are aligned with that identity. Likewise, it is important to remember that many times fonts intended to be printed may not work well when they are converted to webfont, which makes this method less recommended if the fonts were not intended for use on screens.
Step 1
Convert the font to the three formats required by the different browsers: Woff, Eot and SVG. The service is very good for this but it is not the only one.
Step 2
Paste the fonts into the /statics/fonts directory or similar.
Step 3
Call them from the top of the CSS so they load before the elements.
@font-face{ font-family: ‘MyWebFont’; src: url(‘WebFont.eot’); src: url(‘WebFont.eot?#iefix’) format(’embedded-opentype’), url(‘WebFont.woff’) format(‘woff’), url(‘WebFont.ttf’) format(‘truetype’ ), url(‘WebFont.svg#webfont’) format(‘svg’); }
Step 4
Add the typography to the template as follows
font-family: ‘MyWebFont’;
That is all! We hope that with these tips you can further personalize the stores you are working with.
Facebook Comments
Disqus