Universal Responsive Design Template Support Product Page

Answered

Font display appears to have gaps between letters

Asked 01 Aug 2012 05:39:40
1
has this question
01 Aug 2012 05:39:40 christine Weald posted:
Using the template as is I find the font display on my Mac and D/W 5.0 is disconcerting - the spacing between words looks as if I either have two spaces or none. The default font defined in styles.css is the Open Sans font, which I suspect is the reason, as when I change this it does give me a more uniform display, eg 'two' displays as 'tw o'.
I'm missing something here as there is no 'Open Sans' font installed when the template is installed - only one font family is 'awesome-fonts'. If I click on the css? family=Open+Sans: etc in the CSS Styles panel it says that the font (googleapis.com etc) isn't on my machine and to get it from the remote server. Looking at the Google site I can read about these fonts and download the ones I need, but can you explain why this font has been chosen please and are there any consequences to removing its reference in the templates?

Replies

Replied 01 Aug 2012 08:04:03
01 Aug 2012 08:04:03 Vulcho Vulev replied:
Hello Christine.

There is no need to have the font on your machine.
The font is loaded directly from google.
The template is designed to work with Open Sans.
Which container you are editing when receiving that double-spacing?


Regards: Vulcho.
Replied 01 Aug 2012 08:35:12
01 Aug 2012 08:35:12 christine Weald replied:
I did realise that the font is referenced when online, but my point (that I didn't make clear) was that without that font on the machine, editing in D/W was confusing as the letters weren't evenly spaced out giving the appearance of extra or missed spaces. I was using the index.html from the home.dwt - all the text box divs. I downloaded the fonts and it was so much clearer - it might be worth mentioning for others.

I apologise for asking so many newbie questions, but I have only designed the static html pages, not having to deal with databases, ajax or this responsive design. So I have been doing quite a bit of research into the Responsive Design, grids and so forth. Phew! ( I admit I would have liked a few references to these newer technologies on the DMXzone site but that is probably my fault in not keeping up with technology).

Thanks for your helpful reply.
Replied 03 Aug 2012 05:12:25
03 Aug 2012 05:12:25 Michael Carrigan replied:
All I can say is I'm glad someone is getting the help they need. I can't seem to find tutorials or manuals for Universal Responsive Design beyond a couple of videos that show things completely different from mine.

Dreamweaver CS5
Windows 7 Ultimate
18 gig ram
Replied 03 Aug 2012 05:34:29
03 Aug 2012 05:34:29 christine Weald replied:
I admit Michael it is a bit confusing if you have no idea of what is happening with the current trend in websites. It is always difficult for those in the know to be able to explain to those not as privileged. And I agree a 'dummy's guide' to the URD is needed.

I started by reading the article Designing for a responsive Web from wedesign.tutplus.com and then Ethan Mmarcotte's papers on Fluid design (from alistapart.com) which put this template into perspective. Then if you haven't used grid layouts, a quick guide is 'Designing for the web: templates and grid systems (www.designfestival.com)and then take a look at the html5boilerplate website.

If it helps I suggest you follow the link to googleapi's and download the Open Sans font - find the link by double clicking in the CSS styles panel on the CSS$family entry. You only need to install a couple of these and the display will be much better whilst you're developing. The other hint is to download the manuals for the various components this template is built on - eg HTML5 Slideshow which explains how this is to be used.

Lastly the provided index, and two inner html pages are samples only! Don't use these. Create pages from the templates in the template folder. You can then change the templates - say to include the footer information and logo and heading which are non editable regions. One other thing there is a small error in the templates with an editable region being defined inside the <H> tags - Page Title. Move the <H> tags inside the editable tags.

Hope that helps. And lastly try the online help chat - the technicians are more than helpful.
Replied 04 Aug 2012 16:38:29
04 Aug 2012 16:38:29 Michael Carrigan replied:
I'm so busy getting the physical work need to get the vacation rental open (so I can be on my computer more!) that this is getting away from me.

I didn't mean to hi-jack this topic, but...

Wow that is a great help above. I will do thoses things. What I really couldn't understand was starting the whole process. I thought I could add the template to my website which I use to host a few local artists under my umbrella.

Then begin to play with it and start a new slimdangdoo.com which I spend no time on latrely. Doing that really seemed to mess things up. I don't know if it was that or that undoing it messed things up with three sites. Oh well.

I will look into these tips later after adding trim here and there, etc. Thanks again!
Replied 14 Jul 2023 02:32:25
14 Jul 2023 02:32:25 schriftarten io replied:
At schriftarten.io/, we know how important fonts are when it comes to delivering a strong creative message. That's why we provide the ultimate font generator for those looking for beautiful, eye-catching fonts and typography. With our platform, it's easy to explore a vast selection of fonts, ranging from classic writing styles to modern and trendy typefaces – perfect for crafting something unique that stands out.

Whether you're looking for a font to use on your Instagram page, developing a logo design or need one for some other project, our curated collection of fonts ensures you'll find just what you need. With an array of options available at the click of a button, you'll be able to make sure your content makes an impact. Plus, everything on our site is quickly shareable so you can easily grab the code or embed the link and apply it straight away wherever necessary.

Go browse Schriftarten.io today and discover the perfect font that will give your message the wow factor it deserves!

Reply to this topic