Having trouble with @font-face not displaying in my style.css file

I've been scouring the internet in search of an answer to this dilemma, yet my quest has proved futile. Within my style.css file, I've utilized @font-face to incorporate a font (which I previously uploaded to my website's server) on my site. I believe I followed the correct steps, but alas, the chosen font fails to make an appearance on the webpage.

Here is the snippet from my style.css:

@font-face { font-family: Brandon Grotesque; src: url('BGREG.otf'); } 

@font-face { font-family: Brandon Grotesque; font-weight: bold; src: url('BGBOLD.otf');}

Where have I gone wrong? Is there additional code that needs to be added?

htmlcssfonts

Answer №1

Have you specified the font-family: Brandon Grotesque property?

You've added the font to the list of "available" fonts, but haven't instructed anything to actually use it. Do you understand? It's like having Arial, Comic Sans, and Tahoma available, but you need to specify which one to use.

body{
font-family: Brandon Grotesque;
}

Learn more about this topic

_

For example:

In this scenario

/
/ index.html
/ style
  | style.css
  | BGREG.otf
  | BGBOLD.otf

/index.html

<!DOCTYPE html>
<head>
<title>My title</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<p class="something-bold">Bold</p>
</body>
</html>

style/style.css

@font-face {
font-family: Brandon Grotesque;
src: url('BGREG.otf'); 
}

@font-face {
font-family: Brandon Grotesque;
font-weight: bold; 
src: url('BGBOLD.otf');
}

body{
font-family: Brandon Grotesque;
}

.something-bold{
font-weight: bold;
}

Give it a try (:

You can also import fonts from Google Fonts. This can be done easily through script imports, CSS imports, or using JavaScript.

Answer №2

Always remember to use quotation marks when specifying your font name: 

@font-face {font-family: "Montserrat";}

body{font-family: "Montserrat";}

Should font names be in quotes in CSS?

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

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Move the item using drag and drop functionality into one of the dialog boxes

I am working on a project where I have story points represented as simple lines of statements. My goal is to be able to drag these lines into a dialog box that opens after clicking a specific button. As shown on the screen, I am looking to drag my storie ...

jqueryhtml

PHP query string parameter

Within the index.php file, I am looking to add a language selection option. Here is the code snippet I have: <?php if( isset( $_GET['target'] ) ) $target = $_GET['target']; else $target = "productie"; if ( isset( ...

phphtml

Unable to sort the list items when utilizing the load() function

I have multiple li elements within a ul and I am using the following code to sort them in ascending order based on the data-percentage attribute: $(function() { $(".alll li").sort(sort_li).appendTo('.alll'); function sort_li(a, b) { re ...

javascripthtmljquery

Having trouble with loading images in Bootstrap 5 framework

I am currently developing a website using HTML in Visual Studio Code with Bootstrap 5. However, I am facing an issue where the images I have inserted into a new section are not loading, while the ones in previous sections are displaying perfectly fine. < ...

htmlimagebootstrap-5

Sending emails through a basic HTML/PHP form is incredibly time-consuming

Seeking assistance with optimizing my email form that utilizes the POST function alongside a PHP mailto() feature. The process of sending the form takes significantly longer than expected. Any suggestions or guidance would be greatly appreciated. Here&apo ...

phphtmlformsmailto

Did my code effectively block an XSS attack?

Recently, I was informed that my website has vulnerabilities to XSS attacks. In an effort to improve security, I have implemented the htmlspecialchars method as a preventive measure. Here is the function I created: function _e($string){ return htmlsp ...

phphtmlsecurity

Display Content in a DIV When Form Field is Unfocused

After hours of searching, I still haven't found a solution! I am trying to create a form field (text) where users can type in text. I want the text they enter to appear in a div on the screen either as they type or after they finish typing. Maybe thi ...

javascriptjqueryhtml

What is the best way to determine if a child component's property has changed within a method?

The child component is app-google-maps-panel and has 2 properties in the parent component: <div class="col-6"> <app-google-maps-panel [longitude]="longitude" [latitude]="latitude"></app-google-maps-panel> & ...

htmlangulartypescript

Fascinating CSS rendering glitch observed on zooming in: all browsers create a noticeable gap between containers except for Firefox

I'm experiencing a rather intriguing and peculiar issue with css styles when zooming in and out on the browser. Specifically, I've created a material ui card where the background-color changes upon clicking with an animation effect. The animati ...

javascripthtmlcssreactjsmaterial-ui

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

javascripthtmlcss

CssLint detected an unfamiliar property: "fill"

Currently, I am updating the color of an SVG path using CSS: .compute .svg path { fill: #fff; } The functionality is working properly, however, during a CSSLint check, I received this warning: Unknown property: "fill" I am unsure if this is an erro ...

csssvgcsslint

What is the best way to combine 4 small triangle pieces in order to create one large triangle?

Is there a way to create an image background with triangle shapes by combining small triangles together? I am interested in making this collection of triangle image backgrounds. Can someone guide me on how to do it?! .block { width: 0; height: ...

javascriptjqueryhtmlcsssvg

Options chosen will vanish in a multi-select drop-down tag with a scroll bar in HTML

I need assistance with my multiple drop-down select tag issue. .CustomStyle { overflow-x: scroll; width: 16%; } <select multiple size="5" class="CustomStyle"> <option>Option 1</option> <option>Option 2</option> &l ...

javascripthtmlcss

Issue with Bootstrap CSS not rendering properly in Chrome and Firefox

After creating a simple "Hello World" web page and including Bootstrap CSS from a CDN, I noticed that it's only working properly in Microsoft Edge. Both Google Chrome and Mozilla Firefox are not displaying the correct output. I would greatly apprecia ...

htmlcssgoogle-chromemicrosoft-edgebootstrap-4

Delete the current code within the specified div element

Objective: The goal is to ensure that any HTML syntax code or data inside the specified <div id="feedEntries"></div> element is removed, leaving it empty. Issue: What specific syntax is required to remove all content within <div id="fe ...

javascripthtmldom

Achieve a CSS design similar to the Cinemax logo with angled background ends

Is there a way to customize the angle at which the ends of a background are cut off when using -webkit-transform: rotate(-#deg); and background selectors for tilted text with a background? I'm looking to achieve a design similar to the Cinemax logo. ...

csstransform

Focus on targeting dynamic IDs such as #event_rules_attributes_0_interval, #event_rules_attributes_1_interval, etc. using CSS3 styling

Styling input tags using their IDs can be very convenient due to the higher precedence weight they hold compared to classes. For instance, I set a default width for input.text elements within a specific container: .details .metadata input.text { width: 2 ...

csscss-selectors

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

Creating CSS rounded corners with pseudo-elements

Take a look at this fiddle: https://jsfiddle.net/xnr7tqm1/ This is the html code I'm working with: <div class="media-container"> <iframe width="365" height="200" src="https://www.youtube.com/embed/JqjIb6FhU_k" frameborder="0" al ...

htmlcss