The default font-family is set to a sans-serif option by default

My CSS code snippet:

@font-face {
    font-family: 'Istok Web';
    src: url(fonts/fonts_istok-web/IstokWeb-Regular.ttf);
}

 body {
      font-family: 'Istok Web', sans-serif !important;
      line-height: 1.8;
      color: #000;
      background-color:#fff;
  }

When I remove the sans-serif option, the imported font displays correctly. However, when it is included in the code as shown above, the browser defaults to the default sans-serif font. I have tried adding and removing the !important tag but the issue persists. Interestingly, if any extra text is added after 'Istok Web', the font switches back to sans-serif.

cssfontsfont-face

Answer №1

  1. Make sure to carefully verify your file paths. The src is relative to the location of the CSS file, which can be easily misinterpreted. You have /fonts/ in the same directory as your CSS file based on your code. Is this accurate?
  2. Include format("truetype") as demonstrated below. It's recommended to have different font files for better compatibility across various browsers. There are online services available for converting these files at no cost.
  3. If all else fails, confirm that your server MIME types allow the specified font extensions.

I've used this format multiple times and it has consistently worked well.

@font-face {
    font-family: "Archer-Medium";
    src: url("../fonts/archer-medium-pro.eot?#iefix") format("embedded-opentype"), 
         url("../fonts/archer-medium-pro.svg#ArcherMedium") format("svg"), 
         url("../fonts/archer-medium-pro.woff") format("woff"), 
         url("../fonts/archer-medium-pro.ttf") format("truetype");
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Archer-Medium",Georgia,sans-serif;
}

Answer №2

Could you please share which browser you are currently using? Have you tried testing this issue in various browsers to see if it persists across different platforms? It's possible that certain browsers may struggle with capitalization or spacing in the font URL.

In addition, be cautious when using quotes to define the font-family in @font-face as it can yield inconsistent results. Consider implementing the following CSS instead:

@font-face {
    font-family: IstokWeb;
    src: url(fonts/fonts_istok-web/IstokWeb-Regular.ttf);
}
body {
    font-family: IstokWeb, Helvetica, Arial, sans-serif ;
    line-height: 1.8;
    color: #000;
    background-color:#fff;
}

If this solution doesn't resolve the issue, I suggest modifying your folder names and TTF file to lowercase and updating the CSS accordingly:

src: url(fonts/fonts_istok-web/istokweb-regular.ttf);

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

Align the dropdown menu in the center of every navigation item

A div of exact dimensions, measuring 800px wide and 50px tall, contains an unordered list of 6 elements that are centered within the div. The alignment is currently working as intended. My next goal is to create a dropdown list from each element. However, ...

htmlcss

Add() function is not duplicating the formatting

I'm attempting to replicate the content below inside a DIV. <ul class="pie-legend"><li><span style="background-color:#0066CC"></span>10-0-1</li><li><span style="background-color:#33CC33&q ...

javascriptjqueryhtmlcss

Personalize the Bootstrap 4 CDN option

Is there a mistake in my code or am I just missing something when trying to override Bootstrap 4 CSS/SCSS? I tested it on W3Schools and it worked, but it doesn't seem to be working elsewhere. Additionally, I prefer to serve different CSS files to user ...

cssbootstrap-4cdn

Is the menu item a little crooked?

Working on designing a menu, and I noticed that the 'Book Now' option is slightly misaligned (pushed down) after adding a border. This seems to disrupt the horizontal alignment. Is there a way to correct this issue? Check out my Codepen Here is ...

htmlcss

Learn how to style inline HTML elements, such as headings, labels, input fields, and buttons, which are typically displayed as block elements

Title. For my dictionary chrome extension, I am looking to inline a label, input field, and button all in one line. This is what I want to achieve: Define:[ INPUT ] DEFINE The brackets represent the input field and "DEFINE" is the ...

htmlcsslayoutinputgoogle-chrome-extension

Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...

javascriptcssangularjsanimationdom

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

What is the best way to modify a CSS property using logical operators in JQuery?

If an element with the class ".has_padding" does not have any text content, it should be set to "display:none;". However, those elements with text inside should remain visible. Below is some code where I have styled the elements to demonstrate the issue. ...

javascriptjquerycss

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery. Unfortunately, my knowledge of jQuery is ...

javascriptjqueryhtmlcss

Determining the exact position of an image with resizeMode set to 'contain' in React Native

I am currently developing an object detection app using React Native. The process involves sending an image to the Google Vision API, which then returns a JSON file containing coordinates and sizes of objects detected within the image. My goal is to draw r ...

javascriptcssreact-native

Increase the width of columns when hiding additional columns

I have the following HTML and CSS code. If one of the columns is hidden, I would like the other 3 columns to expand. I don't believe using col-md-3 will work in this situation. Is there a way to achieve this? <link href="https://stackpath.boots ...

cssangularbootstrap-4

Avoid duplicate IDs while concealing content with media query in CSS3

Utilizing bootstrap 4 and vuejs, the desktop version includes a container with a tab pane and map. However, on mobile devices, only the map is displayed without the tab pane. The following code simplifies the issue at hand. The tab pane and map have high ...

htmlcssbootstrap-4media-queries

Align buttons in the center of a card or container using HTML and CSS

Hi everyone, this is my first time posting so please go easy on me. I've been struggling to align the buttons at the bottom of my cards to make them look neater. I've tried using flexbox but it doesn't seem to be working. Some people have su ...

htmlcssbuttonflexbox

I am encountering some distortion with my UI when I open Inspect Element

During the development of my Netflix Replica project, I ran into an issue where the UI became distorted when opening the inspect element. While this issue does not affect functionality, it definitely impacts the overall look and feel of the project. Origi ...

htmlcssreactjsvue.jsuser-interface

Responsive design is achieved through the use of CSS media queries targeting the

Could someone please clarify the meaning of the following value? Does it indicate that the output device must support exactly 256 colors, or is it acceptable for the output device to have 256 colors or fewer, or does the device need to support 256 colors ...

cssmedia-queries

What is the most effective way to line up three square images, with one being larger than the other two, and positioning the larger one to the left of the two smaller ones stacked on top of each other?

Currently, I am struggling with arranging three square images on a webpage. The larger image should measure 800 x 800 pixels and be positioned to the left, while the two smaller images, each measuring 400 x 400 pixels, should stack vertically to the right ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to implement a CSS transition for styles that are dynamically created by React?

I have a situation where I am using a button component that is styled based on a theme provided by a context: The code in Button.js looks like: () => { const theme = useContext(themeContext); // { primaryColor: "blue" } return <button className ...

javascriptcssreactjscss-transitions

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

javascriptcssreactjsbootstrap-4react-bootstrap

When the page loads, the jQuery accordion menu will be closed by default

Looking to optimize my vertical accordion menu by adding interactive features. Successfully implemented functionality and CSS styling for the menu. An issue arises on page load with one category being automatically open, even if I remove the "open" class ...

javascriptjqueryhtmlcss

Submission form triggered with incomplete or inaccurate data

I am struggling with preventing my form from submitting if the user has not entered information or has entered it incorrectly. Despite having code in my JavaScript to handle this validation, when I click the submit button, the form still submits. I tried u ...

javascripthtmlcss