Bug - Individual Font is not displayed in Design View

Question

I added an individual font in the source code (CSS and Html) but in Design View it is not showing. It shows in all Browsers but not in Design View.

I added a Font in my style sheet: 

@font-face {
    font-family: 'RobotoRegular';
    src: url('font/Roboto-Regular-webfont.eot');
    src: url('font/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Roboto-Regular-webfont.woff') format('woff'),
         url('font/Roboto-Regular-webfont.ttf') format('truetype'),
         url('font/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.robertofett

{font-family:RobotoRegular;}

.robertounfett
{font-family:RobotoRegular;}

I put the font-files in the folder "font"

I added in the html <span class="robertounfett">Text Text Text Text Text Text Text Text </span>

and in Design View it still shows "times new roman". In all Browsers though it shows the correct font. But I can not work like this. I need to see it in the Design View.

Answer 1

Hi,
I guess the embedded 'EOT' font is asking a bit much for Design View. There are other aspects where Design View doesn't exactly replicate what you see in a browser - which is as expected.

I wouldn't have thought this would be a show stopper for you? - you would just need to 'preview' your finished page before FTPing it :)

Answer 2

I have installed numerous fonts on my computer that all display fine in the Design Pane. But--embedding fonts requires a browser to render them, and the Design Pane is not a browser (it won't play Flash files or do any of the things that require a browser's rendering engine). The Design Pane has to do many things that a browser can't do (including Visual Aids and other features).

Since you said that the TTF fonts are installed on your computer, just set the default font for Design view to Roboto (Tools, Page Editor Options, Default Fonts). Simple.

This is not a bug. Embedding fonts is a non-standard method at the present time, with no universal support across browsers.

---

How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.

Answer 3

Design view will only display  a font that is "Installed" on your computer.

---

Expression Web MVP

Answer 4

Design surface is not a web browser, it will not execute font-face directives. You need to use preview in browser. You should also make sure that you specify additional font families that are commonly used for browsers that do not understand @font-face. That includes design view so if you have not set a default font you will get browser default which is almost always Times New Roman or other Times font.

body {font-family: Helvetica, Arial, sans-serif;}

Now you can apply your robertofett class where you want it or if you want it to be used on the entire page it would be:

body {font-family: RobotoRegular;  Helvetica, Arial, sans-serif;}

---

Free Expression Web Tutorials
For an Expression Web forum with without the posting issues try expressionwebforum.com

Answer 5

Thanks everybody for the solution. I could think of it by myself and I wonder why I didn't. Thank you.

Answer 6

Michael, just a note for future reference—for issues such as this, where an answer or resolution may be offered, it is best to designate the topic as a question, not a discussion. That way you can mark the response(s) which address the question as answer. The forum software treats answers differently, highlighting them in green, and more importantly for later searchers, noting in search results when a topic has been answered.

Also note that just because the software doesn't behave in the fashion that you expect, that doesn't necessarily mean that it is a bug. As Bill and Cheryl noted, @font-face is not universally recognized in all browsers, and those that do support it have differences that must be accounted for in your implementation. Design view cannot possibly conform to all the differences in five major browsers, each with several different versions in use in the wild, and all of which have conflicting levels of support, and in many cases none at all, for various features, especially newer technologies (remember, EW4 was released in 2010, over two years ago).

Furthermore, design view has to do things no browser ever does, like provide outlines for block elements, labels for elements, highlighting of selected elements, common action menus for ASP.NET controls, etc. It is also a completely static display, which does not process dynamic client-side scripting, nor do server-side processing, nor even display active CSS characteristics such as :hover effects.

So, when you encounter something that doesn't work the way you think it should, before assuming it's a bug in the software, ask if others have observed the same behavior, and whether it is expected or not.  ;-)

cheers,
scott

---

Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

Answer 7

So, not a "Bug" after all.

---

How many SEO experts does it take to change a lightbulb lightbulbs buy light bulbs neon lights sex porn.