Can someone assist me in successfully incorporating a web font into a template?

After downloading a Wordpress template, I found the font used for h1 and h2 text to be difficult to read due to its slim design - Century Gothic. However, I prefer using Noteworthy, a font available on my Mac. I converted Noteworthy from OTF to web-font styles (eot, svg, ttf, woff) through an online tool that also provided some code.

The challenge now is locating where Century-Gothic is defined in the template so I can replace it with Noteworthy. Although I've identified all instances of it,

Below is the code segment I inserted into the file style.css:

h1, h2, h3, h4, h5 {
    font-family: Noteworthy;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noteworthy';
    src: url('fonts/Noteworthy.eot');
    src: url('fonts/Noteworthy.woff') format('woff'), url('fonts/Noteworthy.ttf') format('truetype'), url('fonts/Noteworthy.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    color: #750000;
}

Furthermore, here is an example showcasing its application in various style definitions:

.post div h2 {
    margin: 5px 0 5px 0;
    padding: 0;
    font-size: 18px;
    font-family: Century-Gothic, Helvetica, Arial;
    color: #750000;
    font-weight: normal;
    font-style: normal;
}

Despite replacing all instances with Noteworthy, the old font persists upon refreshing my page. The Fonts folder containing Noteworthy font files is placed at the top level of this template folder.

I must emphasize that I'm relatively new to this and have been learning on-the-go by consulting online materials. Any assistance regarding this matter would be greatly appreciated.

You can visit my site at to observe the issue. The header fonts in each post are what I aim to rectify, while the "Stories..." script at the top appears in Noteworthy as a PNG image. Noteworthy is not reflected even after refreshing the page.

I am using a Mac Mini running OS X 10.11.5 with Safari as my browser.

In addition, I seek guidance on modifying the title of the third post from the left, which displays a URL.

Any suggestions or resources you could provide would be immensely helpful. I am willing to email the zipped css file if needed. This task isn't urgent, just something I enjoy working on during retirement.

Thank you!

-Tod

Answer №1

If you inspect the full source of this page, you won't find this code visible. To uncover it in Chrome, simply press Command + Shift + i and search for "hello" to reveal the inserted content below.

Your current theme is integrated with Cufon, a javascript font replacement system.

You have the option to either comment out or disable the font replacement specifically for the h* tags:

<script type="text/javascript" src="http://scruffydog.org/wp-content/themes/DailyNotes/js/cufon-yui.js"></script>

For instance, you can include the following code snippet:

<h2><cufon class="cufon cufon-canvas" alt="Hello " style="width: 49px;     
height: 18px;"><canvas width="64" height="19" style="width: 64px; 
height: 19px; top: -1px; left: -1px;"></canvas><cufontext>Hello   
</cufontext></cufon><cufon class="cufon cufon-canvas" alt="world!" 
style="width: 49px; height: 18px;"><canvas width="67" height="19" 
style="width: 67px; height: 19px; top: -1px; left: -1px;"></canvas>
<cufontext>world!</cufontext></cufon></h2>

Please be cautious when using multiple fonts with Cufon as it may lead to potential conflicts.

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

Fetching User Details Including Cart Content Upon User Login

After successfully creating my e-commerce application, I have managed to implement API registration and login functionalities which are working perfectly in terms of requesting and receiving responses. Additionally, I have integrated APIs for various produ ...

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

What is the best way to align product cards side by side instead of stacking them on separate lines?

I am currently working on a mock-up website for a school project. For this project, I am developing a products page where I intend to showcase the items available for sale. Although I managed to successfully copy a template from w3schools, my challenge lie ...

Creating a dynamic slideshow with automated arrow navigation is simpler than you may think

I have successfully tested the slideshow and it is functioning perfectly without any issues. I would like to have a dual slideshow setup (slideshow 1 and slideshow 2) with next and previous buttons, but I am interested in adding an automatic sliding featur ...

Submitting a value to ngForm: A step-by-step guide

I am working on an ngForm within Angular Material that contains several input fields. I want to include a new field called total in the submission, but this field is not an input field. It should be a readonly field and its value needs to come from the Typ ...

Adjust the background of the page at regular intervals

I currently have: <script type='text/javascript'> var imageID=0; function changeimage(every_seconds){ //change the image if(!imageID){ document.getByTagName("body").src="icwXI.jpg"; imageID++; } else{if(imageID==1){ document.ge ...

Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...

Once you utilize the register function with react-hook-form, the input text becomes uneditable

Struggling to configure react-fook-form for form validation, I encountered an issue where the text input (specifically the username field) becomes uneditable after using the register function. Despite my efforts, I can't type anything into it. const { ...

Having trouble with CSS webkit radial not working on iPad's Safari Mobile browser?

I'm feeling confused right now. I have this gradient code background-image: -webkit-radial-gradient(50% 65%, ellipse cover, #f2f2f4, #201935 55%); It's working on Safari when I change the User Agent to Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 ...

Creating a JavaScript object and retrieving the values of numerous input fields with identical classes

I have encountered an issue that I need assistance with: <input title="1" type="text" class="email"> <input title="2" type="text" class="email"> <input title="3" type="text" class="email"> The HTML code above shows my attempt to extract ...

Include a column displaying the total weight of orders in WooCommerce under the "My Account"

I am having trouble adding weight metadata to an order in the Frontend: My Account - Orders. Despite my efforts, I have not been successful. My attempt to add $order->get_weight(); as meta data to the order is resulting in an error. I have made progre ...

What could be causing this Jasmine test to fail, and is it necessary for all functions to be within the scope in order to be tested

My inquiry involves two separate questions: Question One When conducting Jasmine based Angular testing, is it necessary for all functions to be on the scope in order to be tested? For instance, when I attempt to call a function within the test suite like ...

Tips for adjusting the alignment of the Vuetify component "VDatePicker" based on the position of its parent component on the screen

Currently, I am utilizing the VMenu component from Vuetify which contains another Vuetify component called VDatePicker. The issue arises when clicking on a text field triggers the appearance of the calendar (VDatePicker). Normally, the VDatePicker componen ...

I'm searching for the HTML5 specifications and information on which browsers support specific features. Can you point me in the right direction

Where can I locate the HTML5 specifications for Internet Explorer, Opera, Firefox, and Google Chrome browsers? ...

How can I apply an underline effect when hovering over navigation links in a responsive menu?

I've successfully added an underline effect on hover for the navigation menu. However, I encountered an issue with the responsiveness of the menu. When viewed on screens smaller than 600px, the underline effect covers the entire width of the block ins ...

JavaScript is unable to make changes to the page once it has finished loading

I have implemented a JavaScript code that allows me to send messages in a chat interface: function sendMessageToChat(conversation, message) { $("#content").html(conversation + message); $(".current-msg").hide(); $(".current-msg").delay(500).fadeIn ...

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

Is there a way to customize the ::selection style using mui createTheme?

I'm looking to globally change the color and background color of ::selection in my app. Can anyone advise on how to achieve this using createTheme()? ...

Adding Extra Fields to PHP Email Form

Currently, I have an email form set up using PHP: <form method="post" action="contactus.php" autocomplete="off"> <label for="Name">Name:</label> <input type="text" name="Name" id="Name" maxlength="60" required/ ...

What is the title of this particular CSS method?

I've been implementing a unique approach for more than a year now, and I have yet to come across similar practices elsewhere. Essentially, I am structuring display "states" or "modes" by utilizing CSS classes. Despite searching for terms like "css mod ...