Can you explain why the font in the <style> tag is not changing to "Computer Modern Typewriter" as intended?
The URL seems to be working fine.
<style type="text/css">
@font-face {
font-family: 'Computer Modern Typewriter';
src: url('http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otf');
font-weight: normal;
font-style: normal;
}
body {
font-size: 1em;
font-family: 'Computer Modern Typewriter'
}
</style>
It seems that the link you shared does not support HTTPS, which may be causing issues if your site has an HTTPS connection with restrictions on accessing unsecured HTTP.
Additionally, using OpenType fonts might not be ideal for web use at the moment. You could consider using the WOFF or WOFF2 versions of the same font instead. I have come across one here: https://github.com/dreampulse/computer-modern-web-font. You can incorporate it like this:
@font-face {
font-family: 'Computer Modern Typewriter';
src: url('cmuntt.eot');
src: url('cmuntt.eot?#iefix') format('embedded-opentype'),
url('cmuntt.woff') format('woff'),
url('cmuntt.ttf') format('truetype'),
url('cmuntt.svg#cmuntt') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Computer Modern Typewriter';
src: url('cmuntb.eot');
src: url('cmuntb.eot?#iefix') format('embedded-opentype'),
url('cmuntb.woff') format('woff'),
url('cmuntb.ttf') format('truetype'),
url('cmuntb.svg#cmuntb') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Computer Modern Typewriter';
src: url('cmunit.eot');
src: url('cmunit.eot?#iefix') format('embedded-opentype'),
url('cmunit.woff') format('woff'),
url('cmunit.ttf') format('truetype'),
url('cmunit.svg#cmunit') format('svg');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Computer Modern Typewriter';
src: url('cmuntx.eot');
src: url('cmuntx.eot?#iefix') format('embedded-opentype'),
url('cmuntx.woff') format('woff'),
url('cmuntx.ttf') format('truetype'),
url('cmuntx.svg#cmuntx') format('svg');
font-weight: bold;
font-style: italic;
}Here is the CSS code you can implement:
@font-face {
font-family: "Computer Modern";
src: url('http://example.com/fonts/cmunss.otf');
}
@font-face {
font-family: "Computer Modern";
src: url('http://example.com/fonts/cmunsx.otf');
font-weight: bold;
}
@font-face {
font-family: "Computer Modern";
src: url('http://example.com/fonts/cmunsi.otf');
font-style: italic, oblique;
}
@font-face {
font-family: "Computer Modern";
src: url('http://example.com/fonts/cmunbxo.otf');
font-weight: bold;
font-style: italic, oblique;
}
body {
font-family: "Computer Modern", sans-serif;
}It appears that the font used is an OTF font, which may be causing the issue.
To resolve this, consider obtaining or creating other font formats - particularly the WOFF format for websites.
If permitted by copyright restrictions, you can generate the necessary font format using this tool:
If you think simply using .otf files is enough, think again. It's important to include other formats as well. You can check out this website for more information. To make it easier for you, just click on check fontface and the necessary formats will be provided. Make sure to also visit this link to learn how to add multiple src lines for font-face.
After investigating, it appears that the issue is not related to OTF but rather with the URL itself.
http://mirrors.ctan.org/fonts/cm-unicode/fonts/otf/cmuntt.otfI'm presenting these two options: <div class="pricing-details pricing-details-downloads"> <h4>Single purchase (60 lessons)</h4> <h4>Bulk Purchase: Lesson</h4> <div class="pricing-details-separator">&l ...
As a newcomer to the world of javascript, I am diving into creating a simple To Do list. The basic functionality is there, but I'm scratching my head trying to figure out why the input value in my code keeps returning undefined. The remove button is ...
I am currently working on a project using Laravel Inertia Vue and bootstrap 5.2.2 as part of my dependencies. After loading the css to the tag, I attempted to create a sticky footer. However, I found that the footer is not sticking to the bottom as expect ...
Seeking assistance with extracting domain extensions from various URLs using jQuery. Uncertain how to account for all possible scenarios. Here are the parts of the URL that need to be extracted: https://www.amazon.**com**/dp/067144901X https://www.amazon. ...
I was in the process of developing a website using HTML and testing it locally with Wampserver. However, I encountered an issue where clicking on a link that is supposed to redirect locally triggers the opening of another window for advertising or spam. ...
Does anyone have a method for determining the number of unique tags present on a page? For example, counting html, body, div, td as separate tags would result in a total of 4 unique tags. ...
I have three divs and one iframe. The iframe is contained within <div id="maincontent">. Whenever I refresh the page, it resets back to default.php. How can I make sure that when I refresh the iframe stays on the current page? For example, if I cli ...
I have a series of tags labeled as 'tag-label' in spans. My goal is to combine the values of these tags and insert them into an input field, separating each value with commas. To demonstrate this, I've created a JSFiddle that showcases the ...
I wanted to create a skeleton screen using CSS For reference, I used the link below: https://css-tricks.com/building-skeleton-screens-css-custom-properties/ However, when implementing it in my React app, I encountered an issue. Although I can see the HTML ...
I'm having trouble aligning the images into two rows of three, with the news section on the right side below the navigation bar. I've tried different methods but can't seem to get it right. Both the image and link should be clickable, but I& ...
I'm facing an issue with deleting a row from my database. Despite trying various methods like PDO and MySQL, the data is not getting deleted, but it shows as if it has been deleted. Can someone please help me identify what might be wrong with my code? ...
My goal is to categorize my users from 1 to 7 and display a specific message based on their rank. If the logged-in user has Rank 7, they should see a message saying "you are staff". However, I've encountered an issue where assigning Rank 7 to multiple ...
Is it possible to apply a border radius to the tops of each stack in a stacked responsive bar created from the Nivo library, without affecting the bottom? Currently, the responsive bar's border radius applies to both the top and bottom. Thank you! ...
Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...
My current issue involves the inability to set my background photo using a CSS file. I am utilizing NetBeans for this project. Inside a folder named css, there is a file called global.css which contains the following code: body{ background-image: url ...
As I work on my website, I am facing a challenge with maintaining consistent text size as the page scales. For example: p { width: 10%; height: 10%; background-color: rgb(0,0,0); top: 50%; left: 50%; position: fixed; color: rgb(255,255,25 ...
Is there a method to make a browser pause and wait for all the content of a page to finish downloading before displaying anything? My webpage has several CSS3 animations, but when it is first loaded, the animations appear choppy and distorted because the ...
Utilizing Magnific Popup for presenting two sections of content side by side has been a bit challenging. The left section features a div with a background image that varies in size, causing issues with responsive styling to fit the containers properly. Cu ...
How can I ensure that an inline SVG occupies all available space within a row without specifying its height across different screen sizes? The solution involves setting the SVG to have 100% height with a viewBox, allowing it to adjust accordingly while ma ...
I want to update the background image of a parent div that contains a series of ul li elements. Here is the HTML code I am working with: <section class="list" id="services"> <div class="row"> <ul> <li>& ...