Struggling to make @font-face function properly

I am attempting to incorporate a custom font into my website. In my CSS file, I have the following:

body
{
    font-family: HurmeGeometricSans4_SemiBold;
}

@font-face
{
    font-family: HurmeGeometricSans4_SemiBold;
    src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf);
}

The file is originally named "Hurme Design - HurmeGeometricSans4 SemiBold" and I purchased it with a web license from myfonts.com. The resources directory is located in the same directory as my style sheet. Can anyone spot any errors in what I'm doing here? I have tried numerous times but can't seem to make it work. This is primarily for use on mobile safari.

htmlcss

Answer №1

If your CSS and font files are in the same directory, there's no need to include a subdirectory like resources/. Instead of resources/resources/font, it should simply be resources/font.

If you're unsure, it's always safe to use the complete URL (e.g. 

http://www.yourdomain.com/path-to-font/font
)

Answer №2

One way to enhance your font style is by adding a format hint using format("opentype") as shown below:

    body
    {
        font-family: HurmeGeometricSans4_SemiBold;
    }

    @font-face
    {
        font-family: HurmeGeometricSans4_SemiBold;
        src: url(resources/Hurme_Design_-_HurmeGeometricSans4_SemiBold.otf) format("opentype");
    }

It's important to note that @font-face may have compatibility issues with certain browsers, so it's beneficial to refer to a browser compatibility chart like the one found here:

Another option is to utilize an online font converter to convert the font into multiple formats and then use the generated CSS for better performance.

Answer №3

give this a shot

CSS

@font-face
{
    font-family: myFontStyle;
    src: url(custom_font.woff);
}

div
{
  font-family:myFontStyle;
}

HTML

<div>testing out custom font</div>

UPDATE : (using an html page and placing the font in the same directory)

<html>

<head>

<style>

@font-face
{
    font-family: myFontStyle;
     src: url(myfont.ttf);
}

div
{
 font-family:myFontStyle;
}

</style>


</head>




<body>

<div>trying out custom font</div>
regular font

</body>



</html>

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

What steps can you take to stop a tab from being inserted if one is already present?

I am facing a simple issue where I need to prevent the insertion of a tab if one already exists. Issue: I have a search bar that displays results in a div with class.result_container_2 when a user inputs a name. Upon clicking on this tab, another tab is i ...

javascriptjqueryhtmlcss

Customizing Ngx-bootstrap Carousel Indicator, Previous, and Next Button Styles

<carousel > <a href=""> <slide *ngFor="let slide of slides"> <img src="{{slide.imgUrl}}" alt="" style="display: block; width: 100%;"> </slide> 1. Is there a way to substitute the indicators with images ...

htmlcssbootstrap-4angular6ngx-bootstrap

Execute PHP script through jQuery request within the context of a Wordpress environment

I want to replicate a specific functionality in WordPress. In this functionality, jQuery calls a PHP file that queries a MySQL table and returns the result encapsulated within an HTML tag. How can I achieve this? <html> <head> <script ...

javascriptphpjqueryhtmlwordpress

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly. However, as the num ...

javascripthtmlcss

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

javascriptjquerycssdrop-down-menuclick

html transparent div element

I'm encountering an issue with this specific code snippet: <li class="nav-item dropdown" id="noti_Container" > <div id="noti_Counter" style="opacity: 1; top: -2px;"></div> <a style=" ...

htmlcssopacitytransparent

Tips on incorporating several class names into Next.js elements

My current challenge involves an unordered list element with the following structure: <ul className={styles["projects-pd-subdetails-list"]}> {detail.subdetails.map((sub) => ( <li className={styles[ ...

javascriptcssreactjsnext.js

Passing a variable from a jQuery function to a submitted form: the ultimate guide

I stumbled upon this code snippet online and it's exactly what I needed to learn from as a beginner using jQuery. However, I have a question about transferring or passing the value of counter that was used in the jQuery script within the HTML head tag ...

jqueryhtmltextbox

Error encountered when attempting to save a video using PHP due to an undefined index

Seeking assistance with my php code dilemma. I am attempting to insert data into mysql using a form that includes a video upload option which stores the video locally and the video URL in the database. However, when testing the form, I encounter multiple e ...

phpmysqlhtml

Obtaining the HTML content of a div element that has been retrieved through an AJAX request to a PHP script

My challenge is to fetch a dropdown menu from a server and then manipulate it using jQuery after loading. Although everything loads correctly, I am unable to interact with the dropdown items because they were dynamically added post AJAX response instead of ...

javascriptphpjqueryhtmlajax

Issues with CSS animation functionality have been detected in the Edge browser

In this particular div, I have two spans enclosed. I've created a loader which features a circle filling up with red color repeatedly. While everything appears to be functioning smoothly in Google Chrome, there's a noticeable glitch when it comes ...

htmlcss

Card Alignment with Bootstrap

I need help aligning the last two elements in the card. I want the first one (a button) to be on the left, and another element (a Div with multiple social icon images) on the right side. Can someone provide guidance on how to achieve this layout? <!D ...

htmlcsstwitter-bootstrapbootstrap-5

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

csshtml

Is there a JavaScript function available to remove comments from previously commented HTML code?

<div id="div1">bar</div> JQuery function addComment(element){ element.wrap(function() { return '<!--' + this.outerHTML + '"-->'; }); } addComment($('#div1')); Looking for assistance in unc ...

javascriptjqueryhtml

Unable to load CSS background image and update code

After writing the code in my CSS file, /*The code I initially wrote*/ .wrapper::before { content: ""; position: absolute; bottom: -30%; left: 0; height: 100%; width: 100%; background: url(../img/homeTrans2.svg) no-repe ...

htmlcss

python Chromium process leak initiated by requests-html

My program is experiencing a crash due to a memory leak before it can complete the loop. The script I am using: from requests_html import HTMLSession from bs4 import BeautifulSoup import requests for x in range(9376, 23534): session = HTMLSession() ...

pythonhtmlpython-3.xchromiumpython-requests-html

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

javascriptjqueryhtmlcss

Develop a responsive design for a row of icons that automatically flows to a second line when the screen size is

Currently, I am utilizing Bootstrap 4 and attempting to design a row of 12 icons that are responsive. <div class="app-container"> <div class="row"> <div class="col-md-1"> <a class="" href="https://www.xxx.org.au"> < ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4