Problem with font

[jeroenws]

Hello everybody,

I have a font problem in Google Chrome which I think i caused by a problem in Windows. When I launch Google Chrome it opens a site that is located on my harddisk. It's a HTML site that I made myself which contains all my favorite websites. In the css code i selected the Dina font as main font to be displayed. Everything was working fine till last week or so when Chrome somehow overwrites the Dina font with the stanard Times New Roman font.

I checked everything and i have no idea where this comes from. The html file hasn't been changed and the weird thing is that Firefox and Edge also ignore the Dina font.

The font is installed because it is working in Notepad++. So nothing seems wrong with that.

I have also changed the Dina font to Arial in the css to see is that works and Chrome does display the Arial font then so nothing seems wrong with the css script.

Link to font: https://www.donationcoder.com/Software/Jibz/Dina/

I hope someone can help me to get the Dina font displayed again in Google Chrome.

Thanks in advance!

 

[N_LaRUE]

This is a bit different than the usual Windows 10 type question.

This is more of web development question but I'll see if I can help.

Would you be able to paste the relevant section(s) of your CSS file? That would make it easier to determine if you're calling it the right way.

You might also want to post this in Stack Overflow as they deal with a lot of programming type questions and there's a section for web development unlike here.

 

[jeroenws]

Thanks for your reply. I posted it here because I'm almost sure this is not a CSS problem. It was working fine and when I'm changing the font to Arial it does display the Arial font. I really think the problem is somewhere in Windows.

Anyway here is the CSS you asked for:

<style>
a:link {color: #d3d3d3 ; text-decoration: none; font-weight: normal;}
a:visited {color: #d3d3d3; text-decoration: none; font-weight: normal;}
a:active {color: #d3d3d3; text-decoration: none; font-weight: normal;}
a:hover {color: #FFFFFF; text-decoration: none; font-weight: normal;}
.td {vertical-align: top; width: 12%;}
.table {width: 100%;}
.divInfo {width: 100%; font-family: Dina; font-size : 14px; line-height: 20px; display:none; padding-left:5px;}
.text {width: 100%; font-family: Dina; font-size : 14px; line-height: 20px; color : #d3d3d3; text-decoration : none; display : inline-block;}
.kop {width: 100%; font-family: Dina; font-size : 14px; line-height: 20px; color : #ff8000; text-decoration : none; font-weight: bold;}
</style>


Thanks for your help.

 

[N_LaRUE]

One thing I can think of is using a different method.

Try placing the font in a local folder for the website. So if your website is in folder 'website' make a new folder called 'website\fonts' for example.

Use @font-face in your CSS file.

Example:

@font-face {
font-family: DinaFont;
src: url(font/dina.fon);
}

.divInfo {width: 100%; font-family: DinaFont; font-size : 14px; line-height: 20px; display:none; padding-left:5px;}

Here's a guide, you can search for others - https://css-tricks.com/snippets/css/using-font-face/
and https://developer.mozilla.org/en/docs/Web/CSS/@font-face

Another option is turning your .fon file into .ttf using some software - FontForge Builds for Windows

Hope that solves the issues you're having.