CODEWITHSUNDEEP
asp.netcss.net-4.0fontscustom-font
CoreLean
CoreLean

Reputation: 2139

Custom font working locally but not on server

I am working on Asp.net 4.0 with VS2010. I am trying to use a custom font.

I have a 'Fonts' folder which has font file.

The css is (css file in css folder)

@font-face {
font-family: "Trade Gothic20";
src: url('../Fonts/TradeGothicLTStd-BdCn20.otf');

The font works locally but when I move it to the server it doesn't work.

I have set Build Action Property to content.

What could be the reason?

I saw one question (below)

question on stackoverflow

Do i need to write in config files? I have 'otf' extension file.

Please guide me.

Thanks.

Upvotes: 3

Views: 7048

Answers (4)

Igor Bežanović
Igor Bežanović

Reputation: 24

I faced the same problem, what worked for me.

The path to the font file itself is the problem. For example paths like (../font.ttf) or (/font.ttf) or (font.ttf) did not work.

It worked when I provide absolute links https://www.mydomen.com/font.ttf

I've also tried to cover a wide range of support for different browsers

@font-face {
  font-family: 'GreenWorld';
  src:
    url('https://www.zeleni-svet.com/Allison.ttf') format('truetype'),
    url('https://www.zeleni-svet.com/Allison-Regular.eot'),
    url('https://www.zeleni-svet.com/Allison-Regular.woff')
      format('woff'),
    url('https://www.zeleni-svet.com/Allison-Regular.woff2')
      format('woff2'),
    url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
  font-weight: normal;
  font-style: normal;
}

Upvotes: 0

live-love
live-love

Reputation: 52474

Try entering full URL, without .. (instead of a reference):

Example:

src: url('http://devserver/MyPortal/Content/MvcGrid/Fonts/GridGlyphs.woff') format('woff');

or without the server name:

src: url('MyPortal/Content/MvcGrid/Fonts/GridGlyphs.woff') format('woff');

Upvotes: 0

Ahmed Shahin
Ahmed Shahin

Reputation: 140

Please also try to use different fonts format as some browsers only can view specific font formats

Like this @font-face { font-family: 'Trade Gothic20'; src: url('http://www.URL/fontname.eot'); src: url('http://www.URL/fontname.ttf') format('truetype'), url('http://www.URL/fontname.woff') format('woff'), url('http://www.URL/fontname.svg') format('svg'); font-weight: normal; font-style: normal; }

Upvotes: 1

H Rangel
H Rangel

Reputation: 54

Try this:

  1. First check if your font is accessible through the combined URL.
  2. Second open the webpage and check (using chrome Inspector for instance) if the URL is building correctly.
  3. If none of the shows errors check if the webserver allows the MIME type to be accessed/downloaded
  4. Check this answer to see if it is not a browser support issue: How to add some non-standard font to a website?

Hope this helps

Upvotes: 1

Related Questions