Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font ignored in Chrome

Tags:

css

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.

The CSS code:

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;}    

Thanks in advance!

like image 704
WJ496582 Avatar asked Nov 08 '22 10:11

WJ496582


1 Answers

Try adding the following somewhere at the start of your CSS:

@font-face {
  font-family: "Dina";
  src: url(https://www.donationcoder.com/Software/Jibz/Dina/...) format("truetype");
}

Where https://www.donationcoder.com/Software/Jibz/Dina/... is a link to the file with font, with extension .ttf or .otf, or similar, and is followed by format("truetype") or format("opentype") respectively.

So basically make sure the font is linked correctly.

TimesNewRoman is the default font family, so it's used whenever what you're trying to use isn't found.

like image 115
AgataB Avatar answered Nov 15 '22 11:11

AgataB