What steps are required for my font to be displayed on my website?

I am completely new to programming and have found myself struggling with website development. I can't seem to figure out why my text is not displaying in the custom font I want. It shows up as white italics instead. Any assistance would be greatly appreciated!

<html>
    <head>
        <title>Webpage</title>
        <style>
            @font-face
            {
                font-family: 'my font';
                src: url(C:\Users\theuser\Font\My Custom Font.woff2) format('woff2'),
                url(C:\Users\theuser\Font\My Custom Font.ttf) format('truetype');
            }
            h2
            {
                font-family: 'my font';
                color: white;
                font-style: italic;
            }
        </style>
        <h2>Header text</h2>
    </head>
    <body>
        <p style="color:white;">Font testing</p>
        <body bgcolor="#000000">
    </body>
</html>

Answer №1

While you're headed in the right direction, you can't simply import a font directly from your local machine. Instead, locate where you have saved My Custom Font and create a folder within your project directory called Fonts. Then, paste your My Custom Font file into the root of your project.

For example:

myProject
| - js
| - img
| - Fonts <-- here
| - index.html

After this, within your index.html file, you can import the font into your project like so:

@font-face {
  font-family: 'MyWebFont';
  src:  url('./Fonts/My Custom Font.woff2') format('woff2'),
        url('./Fonts/My Custom Font.woff') format('woff');
}

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

Halt the jQueryUI Slider once a specific difference or margin has been reached

I have a specific margin or distance that needs to be changed from an HTML select option tag dynamically in the future. I have implemented a Range Slider using jQueryUI Slider. My objective: I am looking to halt the sliding action once a specific distance ...

What is the best way to add custom styles to an Ext JS 'tabpanel' xtype using the 'style

Is there a way to change the style of a Ext.tab.Panel element using inline CSS structure like how it's done for a xtype: button element? { xtype: "button", itemId: "imageUploadButton1", text: "Uploader", style: { background : ' ...

What is the best way to connect my JavaScript to this HTML for seamless functionality?

Hello fellow coders! I am a newbie in the coding world and I am facing some challenges with getting my javascript to work on my website. The main purpose of the javascript is to create smooth transitions between different sections of the site. I would grea ...

Eliminate redundant XML entries when using jQuery autocomplete

Does anyone know how to prevent duplicate records from appearing in a jQuery autocomplete dropdown? I am pulling data from an XML file and want to ensure that each record is unique and only displayed once. You can see the issue here ...

"HTML Form Input Configuration Bug: Multiple Selection Fails to Return

I am currently working on a web application using express, and I am trying to create a form for adding a new product. Within this form, I have implemented a multi-select feature for choosing the categories associated with the product. Below is the code sni ...

"Getting Started with Respond.js: A Step-by-Step

I've been struggling to find clear instructions on how to properly set up respond.js. Should I just unzip it into the htdocs folder, or do I only need respond.min.js in there? Then, do I simply reference the file like this... <script src="respon ...

What is causing nested divs to generate a scrollbar?

I am struggling with a situation involving 3 layers of nested divs: <div class="outer"> <div class="inner"><div class="item"></div></div> </div> In this scenario, the .inner div is set to position absolute and each d ...

Tips for showcasing the button label on a different page upon clicking the button

I need help with a functionality where the name of a button clicked on one page is displayed on another page. Here's an example: <a href="#" class="btn btn-danger btn-lg btn-block"> <?php echo $sql->name; ?></a> Currently, echo ...

What is the best way to widen each tab so they fill up the entire width of the content block?

As a newcomer to both programming and this website, I've been exploring various codes for creating vertical and horizontal tabs. I have a specific query about this particular example found at https://jsfiddle.net/eu81273/812ehkyf/: My goal is to adju ...

Display a DIV element sliding in from the left immediately upon website loading

Help needed in creating a jQuery script to smoothly slide a DIV element from <left: -200px> to <left: 0px> right after the page has finished loading. Previous attempts have not been successful, such as: $(window).load(function () { $(" ...

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

right-aligned dropdown toggle

Is there a way to align the dropdown-toggle to the right in a bootstrap dropdown? My code and a jsfiddle are provided below. The arrow pointing down is currently next to the text, but I would like it on the right side. Check out this JSFiddle for referenc ...

Guide for splitting an HTML webpage into 3 separate divs with individual scrolling feature

Currently, I'm working on creating a website with three columns that allows users to scroll down each one independently. I attempted to set the columns at 33% width, but whenever I add content, a strange gap appears at the bottom of the screen and pr ...

How to apply hover effect to an image within a div using TailwindCSS

Is there a way to animate only the image and not the entire card (div) when hovering over it? I want specifically for the image to perform an animation, such as bounce effect. I'm using next/image for displaying the image. Can this animation be achie ...

How to transfer data from local storage to PHP using Ajax

Is there a way to pass values from JavaScript to PHP that are stored in local storage? JavaScript let cartItems = localStorage.getItem("productsInCart"); var jsonString = JSON.stringify(cartItems); $.ajax({ url:"read.php", method: "post", da ...

using javascript to retrieve php variables

After creating a webpage, setting up Apache2 on an Ubuntu server to access it over the internet, and installing PHP5 and MySQL, I encountered issues with accessing database information on my page through a .php file. Despite having a file named test.php th ...

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Utilizing the TweenMax library, I am adding styles to a div while scrolling. However, I am facing a challenge where I need different styles based on varying page resolutions. To address this issue, I implemented an if condition. Is there a way I can use a ...

Issue with Bootstrap 5: bg-customcolor and text-customcolor classes are not functioning as expected

Recently, I decided to update an old bootstrap page to the latest Bootstrap 5.3.1 version. Thanks to this amazing guide, I managed to configure my custom colors successfully: How to extend/modify (customize) Bootstrap with SASS However, I encountered a pr ...

Creating a table of variable covariances

I'm interested in generating a covariance table that displays all possible combinations between 3 to 10 inputs. The illustration below demonstrates an 11x11 table for 10 inputs and a 4x4 table for 3 inputs. Users have the flexibility to select anywhe ...

Utilizing the Bootstrap grid system to align two div elements in one row, with one centered on the page and the other positioned to

Looking for a solution to align two divs inside a flex container - the first centered horizontally and the second aligned to the right. Requirements: must use bootstrap only. |---------------------------------------------| center ...