The CSS3 @font-face feature is not functioning properly for custom fonts

I'm curious about something - when using custom fonts linked with @font-face, do they require local installation to function properly?

Here is the code I have:

@font-face {font-family:"3dumb";src:url(‘http://static.tumblr.com/wi49tax/8Vmlzz5ja/3dumb.ttf’);}
@font-face {font-family:"2dumb";src:url(‘http://static.tumblr.com/wi49tax/fC0lzz68h/2dumb.ttf’);}

#pages {font-family: "3dumb";
       font-size: 2.2em;
   }

While this code works on my machine with the font installed (Safari 5.0.5), it doesn't work on any other machines...

I would really appreciate any assistance on this matter!

cssfontsfont-facetumblr

Answer №1

Your current code is not functioning due to the presence of curly quotes instead of straight quotes. Try replacing the curly quotes with straight quotes and test if this resolves the issue.

Answer №2

In order for your webpage to display the desired fonts correctly, it must have access to the font files. Sometimes these files are only installed on your local machine and not available elsewhere.

You can use a tool like to create a font package that can be embedded in your CSS for consistent styling across different devices.

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

Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...

htmlcssbootstrap-5

JQuery's animations and their influence on element positioning

My thumbnail animation increases in size on hover, but it is affecting the position of the other images. The issue is that when hovering over an image, the others move down and to the right to make space for the animated one. I want the other images to st ...

javascriptjquerycssanimation

What is the reason for Range.getBoundingClientRect() returning 0 for a range that is inside a textarea

When working with a <textarea> element and creating a range inside it, the following steps are taken: A new range is created using document.createRange() The only child node of the <textarea> is retrieved using textarea.childNodes[0] Range st ...

javascripthtmlcssrangegetboundingclientrect

Adjust the overflow to automatically decrease at regular intervals

Is there a way to make the scroll automatically move down a bit every few seconds, revealing more text in the process? Here's an example of how I want it to work: http://jsfiddle.net/Bnfkv/2/ ...

javascriptjqueryhtmlcss

What is the best way to change styles in CSS for parent and child elements using selectors?

Hey there! I am currently working on customizing the navigation menus in WordPress and here is the HTML code for the navigation menus: <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"> <h1 class="menu- ...

csswordpresscss-selectors

conceal any externally-provided iframes

There's an iframe on our page causing a display problem, even after attempting CSS modifications. Is there a way to use jQuery to hide an externally loaded iframe? We tested the document ready function, but it seems that the external JavaScript file ...

jqueryhtmlcssiframe

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

htmlcssbootstrap-4carousel

Ensure that all `thead th` elements remain in a fixed/sticky position when using a data

I am facing an issue with my data table requirement. I need to have 2 thead elements in the table, both of which should stick when scrolling. However, only the last thead's tr stays stuck at the top while the first one gets hidden. Can anyone help me ...

htmlcss

Expanding the full width of the bootstrap navbar

Let's cut to the chase - I'm working with Bootstrap 4 and trying to make my navbar fill the entire width (excluding margins). I know this question has been asked before, so I checked out a post here which suggested using the .nav-fill class, but ...

htmlcssbootstrap-4

What is the method to adjust the opacity of a background in CSS without affecting the entire container?

Although it seems simple, I am trying to design a website background with a container that has semi-transparent properties. When I include opacity: 0.5; within the #content code, the entire container, along with its content and text, becomes transparent. ...

css

The custom bullet points are not appearing correctly

I've been attempting to design a custom bullet list, but it doesn't look quite right as I had hoped. The issue is that the spacing appears too close, you can see an example HERE Any suggestions would be greatly appreciated. Thank you ...

csshtml-lists

Personalized Pinterest button to link to a custom URL (Text Link, Image, or Both)

I've been searching for a solution without success. I'm looking to customize the image for my Pinterest (Pin It) button and pin a specific image by URL, not just the current page. Here is the custom link I created: <a href="http://pinterest. ...

htmlcsspinterest

quirky behavior of form inputs on mobile devices in a responsive webpage

I encountered a strange issue while developing a responsive webpage with form input. Whenever I tapped on an input field on my mobile phone to enter something, the screen would zoom in and cut off the text box on the left side, making it impossible to see ...

androidhtmlcss

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

cssstandards

What is the best way to locate a DOM element using jQuery after I have repositioned it on the page?

I designed a page that consists of two sections, with boxes in each. The functionality I implemented allows users to click on a box in either section and move it to the other section. Initially, this feature works smoothly for the first movement. Theoretic ...

javascripthtmljquerycssjquery-events

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

htmlcssangulartypescript

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

Automatically aligning flex items in Tailwind/Vue to match the height of their neighboring elements

Looking to create a grid of elements using flex, tailwind, and vue like this: https://i.sstatic.net/UyFIE.png I have a backend that provides me with a lot of items, and I want to display each item within a flex container next to each other, with only 2 it ...

cssvue.jsflexboxtailwind-css

Codignator does not attach the array elements together

While building a registration form for my website, I encountered an issue with passing single element values into an array in CodeIgniter. The values are not being passed correctly, resulting in an error message about an empty alert. How can I resolve th ...

htmlcssarrays

Launch the sidebar window using jQuery

I've been attempting to create something similar to this. However, I'm having trouble replicating it exactly. What I've attempted I've managed to create a replica, but the issue is that the buttons are fixed. Could setting the left ...

javascriptjqueryhtmlcss