The rendered typeface may vary from the specified font family

I've encountered an issue with a font on my website. I'm using DIN Regular True Type Font and declaring it as follows:

@font-face {
  font-family: 'DINRegular';
  src: url('../fonts/DINBek-Regular.ttf')  format('truetype'), 
}

body {
    font-family: 'DINRegular', Tahoma, Geneva, sans-serif;
}

Despite setting the font family to "DINRegular" in the code inspector, an accordion on my site keeps displaying Times New Roman instead. The Computed tab also shows Times New Roman as the rendered font. Any suggestions on how to resolve this issue?

htmlcssfonts

Answer №1

Make sure to delete the comma after format('truetype') and add a semi colon at the end.

format('truetype');

In the font family declaration for the body, remove the quotes so it appears like this:

font-family: DINRegular, Tahoma, Geneva, sans-serif;

If your browser doesn't support .ttf files, you can use a more complete font declaration like this:

@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
     url('myfont.woff2') format('woff2'),
     url('myfont.woff') format('woff'),
     url('myfont.ttf') format('truetype'),
     url('myfont.svg#myfont') format('svg');
}

Remember to include all the necessary formats when adding new fonts.

Answer №2

It's important to remember that simply defining a .ttf font is not enough; you must also include other formats such as .woff, .eot, and .otf. To obtain these additional formats, consider using the Font Squirrel Webfont generator tool.

Additionally, always verify that you possess the appropriate licensing rights for any font you intend to utilize in an online environment.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Locate the initial div with a distinct class from the bottom upwards

If I have a HTML page and want to search for the last occurrence of a div with a specific class, how can I do that using Jquery? Assuming the following HTML structure: <div class="container"> <div id="1" class="something special"></div& ...

jqueryhtml

Achieving Flexbox alignment in a responsive layout

Struggling with achieving a responsive layout using Flexbox. Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest. The main issue I am encountering ...

htmlcssflexbox

The JavaScript and CSS properties are not functioning properly with the HTML text field

I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...

javascriptjqueryhtmlcss

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

javascriptjqueryhtmljsonajax

What is the best way to select a random array entry in PHP?

I am currently working on developing a website to enhance my programming skills. <html> <title>VidSelector</title> <head> <link rel="stylesheet" type="text/css" href="styles.css"> <div id="welcome" ...

phphtml

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

javascriptjquerycss

The behavior of the CSS Position property is exhibiting unique characteristics when used in

I am encountering an issue where an image is displaying differently based on the position attribute in Firefox compared to Chrome and IE11. Take a look at the preview on . Notice how the bottom tip of "Fountain Valley" is incorrectly positioned in Firefox ...

htmlcssimagefirefoxposition

Unable to access the suggestion list within the modal

I incorporate the PrimeNG AutoComplete feature within a PrimeNG Dialog, displaying a list of elements below the AutoComplete in the dialog. My objectives are: To set the max-height of the modal dialog to 300, and have a visible scrollbar if the total ...

javascripthtmlcssangularprimeng

Applying CSS styling to PHP documents

I am a beginner, so please go easy on me. I am looking to style variables like $product_name, $author, and $details. I was thinking of styling the echos, but in this scenario, the only echo is: <?php // Establish connection with the MySQL database ...

phpcsswhile-loop

Achieving left alignment for Material-UI Radio buttons: Float them left

Click here to view the demo https://i.stack.imgur.com/Yt4ya.png Check out the demo above to see the code in action. I'm currently struggling to align the radio buttons horizontally, wondering if there's an easier way to achieve this using Mater ...

javascriptcssmaterial-designmaterial-uistyling

Scraping Data: A guide to extracting width values from CSS style tags using Scrapy and CSS selectors

I've recently started learning scrapy and I'm struggling to extract the width from a div using a CSS Selector. No matter how hard I try, I can only find solutions using xpath instead of css selectors. Here is the HTML code snippet: <div clas ...

csspython-2.7css-selectorsscrapy

How can I retrieve a PDF from a URL provided by the server using AngularJS?

Is it possible to automatically download a PDF file from a URL received through a $http GET() request from the server? The $http request is triggered by clicking a button on the front-end, and upon successful completion of the request, the URL where the PD ...

javascriptphpangularjshtmllaravel

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

I need to implement a functionality where clicking a button within a <td> element will retrieve the values of other <td> elements within the same row (<tr>). Here is the current implementation: $(document).ready(function(){ ...

javascriptjqueryhtml

The CSS file I've linked to in my HTML (ejs) document seems to be getting

As I work on developing my app from the backend, I am encountering an issue with loading CSS locally on my page. I am utilizing Node.js, Express.js, and EJS for my pages - part of the MEN/MEAN stack. <link href="../public/stylesheets/style.css" rel="st ...

htmlcssnode.jsexpressejs

The image slideshow on W3 Schools displays images in a stacked formation

Utilizing this code snippet from W3 Schools to incorporate an image slideshow into my web project. However, upon page load/reload, the images appear stacked vertically rather than horizontally (one above and one below). The slideshow functions properly aft ...

javascripthtmlcss

Baffling Visibility Issue: iframe's Transparency Lost in Chrome and IE, Only Visible in Firefox

I have encountered a puzzling issue: http://jsfiddle.net/akosk/t2KvE/8/ HTML <div id='base'> <iframe id="myFrame" src="about:blank" frameborder="0" allowTransparency="true"></iframe> </div> <script id="conte ...

htmlcss

A list containing various checkboxes

I have created a list with checkboxes in each item. I want to ensure that if any of the child checkboxes are checked, the parent checkbox is also automatically checked. Here's the HTML code: <input type="checkbox" id="parent"> <ul> ...

jqueryhtml

"Using Mxgraph's getPrettyXml function does not retrieve the value of a custom

I’m having trouble with mxgraph’s getPrettyXml() not capturing the value of Custom elements. In my customized template, it looks like this: <add as="symbol"> <Symbol label="Symbol" description="" href="" data="{[hi :bill]}"> &l ...

javascripthtmlmxgraph

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...

javascriptcssreactjsmaterial-uifrontend

Scrapy spider malfunctioning when trying to crawl the homepage

I'm currently using a scrapy scrawler I wrote to collect data from from scrapy.contrib.spiders import CrawlSpider, Rule from scrapy.contrib.linkextractors.sgml import SgmlLinkExtractor from scrapy.selector import Selector from .. import items clas ...

pythonhtmlweb-scrapingweb-crawlerscrapy