I've been struggling to incorporate a unique font into my website, but I keep encountering the same error every time. Despite my efforts, I haven't found much guidance on how to rectify this issue.
Below is the code I'm using:
@font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF")
}Any suggestions or solutions would be greatly appreciated!
It is recommended to follow the fontspring bulletproof syntax@font-face to work correctly in most cases:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('eot'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg')
}
Although most browsers now support TTF fonts, if you are unable to see the font in your browser, try this:
@font-face {
font-family: "Moderna";
src: url("/MODERNA.TTF") format("ttf");
}
Remember to place the rule at the top of your CSS file and ensure that the file /MODERNA.TTF exists.
It seems likely that the issue lies with your path or URL:
src: url("/MODERNA.TTF")
This suggests that you may be entering a directory named 'MODERNA.TTF' rather than a file.
As mentioned by @Mik, the correct declaration should work fine unless the file cannot be found. Depending on the structure of your HTML/CSS files, it should look more like this: (provided that your font file is in the same directory as your CSS.
@font-face {
font-family: 'Moderna';
src: url('MODERNA.eot?') format('eot'),
url('MODERNA.woff') format('woff2'),
url('MODERNA.woff') format('woff'),
url('MODERNA.ttf') format('truetype'),
url('MODERNA.svg#svgFontName') format('svg')
}
Additionally, remember that referencing font files via @font-face is case-sensitive (with some exceptions).
So make sure to double-check if your font file name truly uses uppercase letters (MODERNA.TTF or moderna.ttf).
Incorporating Angular 6 in my project, I have come up with the following templates: Header, Left panel, Body part, Footer Header, Left panel, Body part, Right panel, Footer Header, Body part, Footer Considering the numerous templates, I am aiming to tran ...
I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...
In my application, there are 3 groups with different permissions: viewer, editor, and creator. I need to display the appropriate buttons based on these permissions. For viewers, they can only see lists and details. Editors have viewer permissions plus th ...
I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...
Can I use Bootstrap 4 utilities to horizontally center an element like a <select> within a col at a specific breakpoint and below? I want to achieve this without using custom CSS. For instance, I want to center a <select> at xs and sm breakpoi ...
I'm attempting to utilize modernizr in order to check for browser support of the :nth-child selector, but I am unsure of how to proceed. I came across this particular example on http://jsfiddle.net/laustdeleuran/3rEVe/ which tests for :last-child. How ...
Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...
Within a div, I have three textboxes and am looking for a way to trigger an event when focus leaves one of these inputs without transitioning to another one of the three. If the user is editing any of the three controls, the event should not be triggered. ...
I am attempting to generate a basic html output that resembles the following <button class="searchbutton" id="search_button" type="submit">--> <i class="icon-search"></i> Search</button> when using Cake PHP's form h ...
I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...
Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...
I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected. Even though I copied the code from a tutorial, it functions perfectly the ...
Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...
I have a basic understanding of web scraping but I am facing an issue. I am using PHP Simple HTML DOM and struggling to extract images from within each 'li' tag. <ul class="slides"> <li> <img src="www.webpage.com/oH7oCOEhQAB ...
Visit this link for more information: http://apolytos.com/new/img/test.html <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background:url("background.jpg"); background-repeat:no-repeat; backgr ...
I'm attempting to create a more compact version of the ComboBox, but no matter what I try, the space between the text and arrow button remains consistent. When using the following CSS: .combo-box-base > *.arrow-button { -fx-padding: 0 0 0 0; ...
I've been searching high and low for a solution to my problem with no luck, so I'm turning directly to you. Is there any way to display TestNG's Reporter output in Gradle HTML reports? Here's the scenario: I have multiple testNG test m ...
It is necessary for me to concatenate a numeric value, stored in a variable, with the input fields. For example: var number = 5; var text = $("#dropdown_id").val(); I wish to append the value of the variable 'number' to 'dropdown_id' ...
I am currently facing a puzzling situation. There are two emails that I have - one with a sidebar and one without. When the email with the sidebar is received in Gmail, it displays correctly. However, the email without a sidebar loses some formatting, incl ...
I am currently using a jQuery script that searches for a specific string in a simple text input field and highlights only the string itself if it is found. However, my data is organized within a table and I am interested in knowing if it is possible to hig ...