Load font at the server

Question

0.00/5 (No votes)

See more:

Hi everybody,

I am using asp.net mvc 5 applicatie

I try to load a font at the server side, I am using the font: TrendSans-Five.

I have a main css - Site.css like this:

C#

@font-face
{
font-family: TrendSans-Five;
src: url('../fonts/TrendSans-Five.otf');
src: url('../fonts/TrendSans-Five.otf') format('embedded-opentype');
src: url('../fonts/TrendSans-Five.eot');
src: url('../fonts/TrendSans-Five.woff');
src: url('../fonts/TrendSans-Five.ttf') format('truetype');
/*src: local(TrendSans-Five), url(../fonts/TrendSans-Five.otf) format('opentype');*/
}

And in the webconfig I declare it like this:

XML

<staticContent>
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="font/truetype" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".otf" mimeType="font/opentype" />
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    </staticContent>

Local it is working correct - seeing the correct font

The site is: http://www.lolacyclingclub.org/[^]

And I have the font in the Font folder as: TrendSans-Five.otf.

So how to fix this , that you can see the correct font on the server?

Thank you all

Posted 17-Apr-15 2:50am

Member 10225052

Updated 17-Apr-15 3:11am

v2

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2015-04-17T03:13:00

There are a couple of errors in your CSS.

First, you have a stray \9 in one of your CSS files, which causes the minification to fail:

CSS

/* Minification failed. Returning unminified contents.
(2815,5): run-time error CSS1035: Expected colon, found '}'
 */
...
    .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
        position: absolute;
        margin-left: -20px;
        margin-top: 4px; \9
    }

Second, you've defined a font-family called TrendSans-Five, but you've told the body and headings to use a font-family called Trend Sans Five. The family names need to be exactly the same.

CSS

body {
    font-family:"Trend Sans Five";
    font-size: 10px;
    line-height: 1.42857143;
    /*color: #888888;*/
    background-color: #060606;
}
...
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Trend Sans Five";
    font-weight: 500;
    line-height: 1.1;
    color: #ffffff;
}
...
@font-face
{
font-family: TrendSans-Five;
src: url('../fonts/TrendSans-Five.otf');
src: url('../fonts/TrendSans-Five.otf') format('embedded-opentype');
src: url('../fonts/TrendSans-Five.eot');
src: url('../fonts/TrendSans-Five.woff');
src: url('../fonts/TrendSans-Five.ttf') format('truetype'); 
/*src: local(TrendSans-Five), url(../fonts/TrendSans-Five.otf) format('opentype');*/
}

EDIT: The font mime-types that work for me are:

XML

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="svg" mimeType="image/svg+xml" />
            <mimeMap fileExtension="eot" mimeType="application/vnd.ms-fontobject" />
            <mimeMap fileExtension="otf" mimeType="application/x-font-opentype" />
            <mimeMap fileExtension="ttf" mimeType="application/x-font-truetype" />
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
            <mimeMap fileExtension="woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
</configuration>

Load font at the server

1 solution

Solution 1

Add your solution here

Preview 0

Load font at the server

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us