Embedded font doesn't work

Question

I've put the Win8 font to the project and it doesn't work, but it works in the Chrome browser!!!

I've added font in the following steps:

1. Added file 'segoeuib.ttf' to the my project (ttf file is extracted from the Windows Font Directory)

2. Inserted to the default.css:

@font-face{
    font-family: 'Segoe_UI_Bold';
    src: url('/fonts/segoeuib.ttf') format('truetype');
}
.test-font{
    font-family: 'Segoe_UI_Bold';
}

3. Inserted to default.html:

<div class="test-font">    
Segoe UI Bold text
</div>

but in the result text is showed like 'Times New Roman':

Answer 1

It seems like it's simply not finding the font. Did you set the Build-Action to "Content" on the font file?

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 2

Sorry, I don't understand what means "Build-Action to Content on the font file".

Is it any action in the Visual Studio or any action with physical ttf file?

Answer 3

Are you getting this error message when you run the app? If so, it's because the font file itself doesn't support embedding:

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 4

No, I don't have any error messages, only the text is showed using incorrect font. Build and Debug output windows also don't have any css errors or warnings. 

Answer 5

Please try the same with an open-source free font you download from the internet, and I think it will work. This is because the font that you exported from the fonts folder does not support embedding.

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 6

Also, the error is in the JavaScript console:

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 7

Yes! thank you for help. JavaScript console rely helped. 

In the result solution is the using of fonts without restrictions and using JavaConsole for viewing of the errors :)  

There is one more solution... The removing of the embedding restrictions in the usual OS fonts. But I'm not sure that it's legal way.

Answer 8

Right... I don't know about the legality of this. However, shouldn't you be able to use this font, without embedding, since it's already on the system?

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 9

Does this do what you want?

.test-font{
    font-family: Segoe UI;
    font-weight: bold;
    font-size: 30px;
}

---

Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.

NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

Answer 10

The problem of using font by the name (using fonts are installed in the system) is that I cannot use even some existed fonts on my PC.

For example 'Segoe UI Bold', I see it in the OS font's folder, but if I define "font-family:'Segoe UI Bold'" in the project then app shows the text like 'Times New Roman'. I dono what is reason, maybe this font has to be installed in the Visual Studio before. 

So I'm not sure that any fonts will be showed correctly on the user PC even if they are installed in the system.  

Answer 11

Does this do what you want?

.test-font{
    font-family: Segoe UI;
    font-weight: bold;
    font-size: 30px;
}

Yes, it looks correctly. But maybe I will use embedded fonts. It's more stable.

Thank you very much four your help!