Font family experiencing compatibility issues with font face

The prominent "C" at the center of the page, as well as the H1 ('Choose The Right...) should be displayed using the "Pirulen" font-family.

My initial attempt was to implement the traditional @font-face method for CSS, followed by a more advanced approach using WEBFONT GENERATOR and incorporating all the generated files into the MyFonts folder.

CSS

@font-face {
    font-family: 'pirulenregular';
    src: url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.eot');
    src: url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
         url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.woff') format('woff'),
         url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
         url('/www/wp-content/themes/virtue-child/MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Despite these efforts, the desired outcome has not been achieved yet.

cssfontsfont-face

Answer №1

Make sure your URL is a web address and not a file path. It's typically set relative to the location of the CSS file, like this:

@font-face {
    font-family: 'pirulenregular';
    src: url('MyFonts/pirulen_rg-webfont.eot');
    src: url('MyFonts/pirulen_rg-webfont.eot?#iefix') format('embedded-opentype'),
     url('MyFonts/pirulen_rg-webfont.woff2') format('woff2'),
     url('MyFonts/pirulen_rg-webfont.woff') format('woff'),
     url('MyFonts/pirulen_rg-webfont.ttf') format('truetype'),
     url('MyFonts/pirulen_rg-webfont.svg#pirulenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Another issue is that you reference the font family as "pirulen" on the page but in the CSS it's "pirulenregular"—make sure they match by choosing one.

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

Cannot utilize Map within each loop

Below is the less code snippet: @threshold:{ a:50; b:200; }; @themes:{ a:red; b:blue; }; .mymixin(@name,@color,@thrshld){ //do-something } each(@themes,{ .mymixin(@key,@value,@threshold[@key]); }); Upon executing the code, an error message ...

cssless

Incorporate a class into a link within the wp_list_pages function

I've been experimenting with creating a hover effect on list items using the wp_list_pages() function in my Wordpress theme. Despite my efforts, I've hit a roadblock in getting the hover effect to work properly. As a beginner in web development, ...

phphtmlcsswordpress

Why do browsers, like Chrome, fail to update the .css file after making edits on a page? Is there a workaround for this issue?

Whenever I make changes to a .css file and upload it via ftp to my Apache web server, I always have to remember to clear the cache in my browser in order to see the correct page. What is the reason behind this issue? Shouldn't browsers automatical ...

htmlcssbrowserbrowser-cache

New design for UI grid: eliminate sorting menu and right-align column headers

I came across a question similar to this one My goal is to eliminate the dropdown menu from the column headers and align the text of the headers to the right. .ui-grid-header-cell { text-align: right; } However, my current attempts result in the disap ...

htmlcssangularjsangular-ui-grid

The scrollHeight property is not accurate in Internet Explorer

I'm attempting to determine if a div contains a visible vertical scrollbar However, when comparing the scrollHeight with the clientHeight, there is always a difference of 1 if (div.scrollHeight > div.clientHeight) { // Div has a visible ...

javascriptjqueryhtmlcssinternet-explorer

Utilize LI styling exclusively for a specific section of the website

Is it possible to style LI items with padding and bullet points only when they are inside the <div class="article-content"> element without affecting other ul/li styles on the website such as the navigation menu? Thank you for your help! .article-co ...

htmlcss

A step-by-step guide on incorporating RAW css into your Jekyll website

I am experiencing an issue with loading a CSS file on my website. <link rel="stylesheet" href="/assets/css/my_file.css"> This file is located at _assets/css/my_file.css. However, when I try to load the page, the CSS file does no ...

htmlcssjekyll

When rails code is placed within haml tags, it results in generating empty spaces within the HTML tags of browsers

Every time a rails variable is nil (or when using rails code (as seen in the third code example)), my html displays a string of empty characters. new.html.haml %h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => ...

ruby-on-railshtmlcsshaml

This JavaScript code is configured to only display content on half of the page

Has anyone experienced issues printing a full element (body) using the jquery plugin https://github.com/jasonday/printThis? I have only been able to print half of the element vertically. I also tried using raw javascript with window.print(); but encountere ...

javascriptjqueryhtmlcss

Creating a mobile/tablet friendly menu design

I'm currently working on designing a menu. I have made it look pretty nice so far, but I am facing an issue when the menu is viewed on mobile or small tablets. I want the menu to disappear and be replaced by a "MENU" button instead. Does anyone have ...

javascripthtmlcssmenuresponsive-design

Displaying JSON information in an HTML table with JavaScript

I successfully displayed JSON data in an HTML table. Here is the snippet I used: $("#example-table").tabulator({ height:"300px", fitColumns:true, tooltips:true, columns:[ {title:"Month", field:"Month", sorter:"string"}, {title:"Numbers", ...

javascripthtmlcssjson

I am interested in altering the font color

Hey there, I'm new to HTML and CSS and need some help changing the font color and size of my navbar. I've included my code below: HTML code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

htmlcss

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline

The watermark feature in HTML may not appear when printed on every page

I'm facing an issue with adding a watermark style. The watermark displays only on the first page when attempting to print in Chrome. It works perfectly in Firefox and IE. <style type="text/css"> #watermark { color: #d0d0d0; font-size: 90pt; ...

javascripthtmlcss

Easily move a div by dragging and dropping it from one location to another

Looking to seamlessly transfer a div from one container to another. I've got the CSS and HTML code ready for you to assist me, here is the snippet: <!DOCTYPE html> <html> <head> <style type="text/css"> #my ...

javascriptjqueryhtmlcssdrag-and-drop

What is the process for altering an SVG image following a click event in Javascript?

I have a tab within a div that includes text and an svg icon as shown herehttps://i.stack.imgur.com/TjwIK.png When I click on the tab, it expands like this https://i.stack.imgur.com/XNuBi.png After expanding, I want the svg icon to change to something e ...

javascripthtmlcsssvg

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

I am in the process of developing a custom ScrollToTop component using MUI's useScrollTrigger hook. More information can be found at this link Feel free to check out the sample code here: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9 ...

javascripthtmlcssreactjsmaterial-ui

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

htmlcss

Safari's flexbox wraps the final column on the top row

When viewed in Safari and some other iOS based browsers, the last column of the first row wraps to the next line. Safari: https://i.sstatic.net/FhYyn.jpg Chrome / Others: https://i.sstatic.net/Vkvr0.jpg Code: .flexthis { display: -webkit-box; d ...

twitter-bootstrapcsstwitter-bootstrap-3flexbox

What is the best way to update inventory availability on Shopify following adjustments to product variations?

While working on my Shopify store, I managed to find a code that displays the available quantities in stock with a visually appealing effect on the product page. However, I noticed that this code doesn't refresh when selecting different variants of th ...

htmlcssvariablesshopifyliquid