Questions tagged [font-face]

@font-face is a CSS rule that allows the definition of embedded fonts within a webpage.

Filter by
Sorted by
Tagged with
-1 votes
0 answers
20 views

Error in importing Google Fonts in my CSS Javafx

Can anyone tell me what's the problem to this? I imported it into my css file copied from google fonts Sep 17, 2023 9:25:52 AM com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged INFO: Could ...
Hanzo's user avatar
  • 1
0 votes
1 answer
36 views

@font-face doesn't seem to be displayed, although it is being downloaded

Here's a website I'm working on: https://wolfies-whisky-ltd.myshopify.com (password: shooting) I've used @font-face to load fonts that are being displayed fine - the RightGrotesk family. (I'm planning ...
Benjamin Scott's user avatar
-1 votes
0 answers
21 views

Fontawesome icons are not displayed for me

This is my code: @import url(font-awesome.min.css); .icon::before { font-family: FontAwesome ; } HTML: <i class="fa-cloud icon"></i> I checked everything, but I can't find ...
touka 's user avatar
0 votes
0 answers
46 views

Calibri font family is not applying for react application in IOS Browsers

Hi I am using calibri fonts in my application,It is working fine in windows in chrome browser, But not working in IOS safari and chrome browsers. I have added the .ttf and .woff2 files in project ...
sudhir_arium's user avatar
0 votes
2 answers
43 views

font-face is not working in CSS and browser is not showing my font

@font-face { font-family: BYekan; font-style: normal; font-weight: normal; src: url(../resources/BYekan.eot); /* IE9 Compat Modes */ src: url(../resources/BYekan.woff) format('...
AbbasLotfinasab's user avatar
0 votes
0 answers
33 views

Dynamic import of font-family by user using Angular

the case i have is the user to be able to upload a custom font which i can use for text in canvas (currently in the same component, but i can change that if its necessary), but currently im not able ...
quantom's user avatar
0 votes
1 answer
39 views

Multiple custom fonts not working in CSS + HTML despite quadruple-checking proper formatting?

I'm new to programming and also this website. So please keep that in mind in your explanations! I'm making a website on Neocities and I'm trying to use multiple custom Google Fonts. For some reason ...
newbieneocities's user avatar
0 votes
0 answers
32 views

Why Opera doesn't recognize Ubuntu font in my site?

I have changed the font of my blog in Wordpress (Genesis template) by uploading them to my own server, but Opera does not recognize Ubuntu font. The other browsers do. This is the code I'm using: ...
Carilda's user avatar
0 votes
1 answer
33 views

Nerd Font icon not rendering on button tag but works on other tags

I have a Nerd Font icon, it's not rendering on button tag, but works on other tags like h1: I have tried nothing yet, no CSS. It's shown on the previous image what I am expecting; the icon should be ...
snich's user avatar
  • 67
0 votes
1 answer
57 views

CSS @font-face rule making <h1> tag bold

I am getting confused in learning @font-face conceptually. Please see the below code. The text in <h1> tag is getting bold while the text of <div> (With CSS, websites can use) is normal. ...
Neha Agarwal's user avatar
0 votes
0 answers
114 views

Microsoft Edge won't render the correct font

On all~~ websites, elements that with Roboto as font-family will instead render a courier-like font with missing special characters like ã or ç. Inspecting one of the elements, it shows both in the ...
Fernando D'Andrea's user avatar
0 votes
1 answer
43 views

Used the @font-face feature in CSS to import font, but it is not showing as the creator advertises

The above image is how the imported font should appear (edit: the first font style) as the creator says it should. However, the above image is how it appears to me. Below is my CSS. I only added text-...
fatbandoneonman's user avatar
1 vote
0 answers
26 views

issues integrating local fonts in react

Hey so i am trying to include custom fonts that i have placed in assets/fonts.Also i am using this inside GlobalStyles. Whenever i try to import the file by using: import fontLight from "./assets/...
Rahber Hussain's user avatar
1 vote
2 answers
95 views

How to find the available font-weight in a custom font css file

I am working on a custom font feature where the user can upload a .css file and use it in our editor. In order to do show I need to know the font-weight present in the file, so that I can display them ...
Arif's user avatar
  • 33
0 votes
4 answers
135 views

How can i apply @font-face in React without .css file

I have generated "@font-face { font-family: 'RFDewiExpanded-Thin';font-weight: 100; font-style: normal; src: ........}". How can i apply it in React without external files? Haven't any idea ...
Anton Borkovskij's user avatar
0 votes
0 answers
41 views

My custom fonts are uploaded and included in the list but do not apply

I created a dashboard that provides the option to upload fonts in .woff format which will be used with the Kirki framework. The files are added successfully but I can't figure out where to output the @...
justtme's user avatar
  • 33
0 votes
0 answers
34 views

My custom webfont is not displaying properly in iOS 16

I have a website with Hebrew text which contains niqqud and cantillation (both are sets of diacritic marks). In order to ensure the proper display of these marks, I embedded a font on my site. Using ...
Inkbug's user avatar
  • 1,682
0 votes
0 answers
26 views

itext going to cut when fill gradient in chrome browser

I-text going to cut while fill gradient in chrome browser with 5.2 version fabric when i fill gradient to itext, its going to cut outside the boundary box in chrome browser for 5.2 fabric version. if ...
Apurv Jain's user avatar
0 votes
0 answers
57 views

Why isn't my custom font working properly on popular browsers?

I Downloaded all the formats of this two fonts, the humane one works on mozilla and chrome but not on safari and the Sharp Grotesk font doesn't work in none of the most popular browsers. In my CSS I ...
Lucas Martinez's user avatar
0 votes
1 answer
37 views

Why isn't my downloaded font displaying correctly?

I downloaded a font, and in a zip came multiple files. I followed the instruction in the .txt file, which told me to put it in as a font face. However, when I put it in, it looks nothing like the font ...
bonk's user avatar
  • 31
0 votes
1 answer
27 views

web component packaging Settings

How do I set the web component in vue.config.js and extract a separate section of iconfont.css when packaging I run the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher....
LinKangJing's user avatar
0 votes
2 answers
60 views

How can I use a custom font in Scratch using CSS and @font-face?

How do I make a custom font from scratch? @font-face { font-family: JuneBug; src: url('https://raw.githubusercontent.com/grannygamer777/DerpFont/main/my%20derp%20handwriting.ttf'); } h1 { ...
epiccoderorsomethingidkman's user avatar
0 votes
0 answers
28 views

Massive font declaration

Im just looking at some code that I have inherited and there is a font declaration in the CSS that is huge (I even had to delete the size of it to share here)! Can someone please explain what this is ...
user2713512's user avatar
0 votes
0 answers
34 views

Warn => Failed to decode downloaded font

I getting this warn in my console when i starting my app. (this happen when i try to add fontFamily to the style={{fontFamily: 'PoppinsMedium'}}). When i using index.css all fonts break (just using ...
mustToKnowAnswer's user avatar
0 votes
0 answers
110 views

Why Segeo UI font family is not working on Mac while on windows it is working fine

Segeo UI is builtin font family in browser.I have font family files that I am using in my react project. But the problem is that it works perfectly on Windows. however the font family didn't apply ...
sohaib's user avatar
  • 604
0 votes
3 answers
65 views

How do you apply a custom font family for placeholder, textbox & button?

I want to use a custom font from my computer for placeholder and button. My @font-face. @font-face { font-family: customfont2; src: url(Font/otf/segment14.regular.otf); } I ...
Kenny_Kodez's user avatar
0 votes
1 answer
79 views

CSS @font-face not rendering icons in production (instead it shows only unicodes) works fine in local

I am trying to render icons from the Icomon library in my Angular application. I'm suspecting it to be a problem of how my CSS files are included withing the index.html page of icomon fonts we have &...
Lingaraju k's user avatar
0 votes
0 answers
178 views

How to apply custom fonts (Proximanova.woff file using @Font-Face) while replacing css of HTML response with custom CSS in Desktop Application?

I have started working on Desktop Application using JavaFx. In one of the screens, a part of it is loaded by HTML Response got by PHP Webservice Call. My aim is to replace css file of the HTML ...
ksa's user avatar
  • 23
0 votes
0 answers
51 views

Craco facing @font-face SyntaxError

I have an ElectronJS + ReactJS app. The application is set up by following this guide on MongoDB's website. Currently I'm using the Chakra UI kit for my front end which then led me to this ...
InvalidHop's user avatar
0 votes
0 answers
21 views

Is there an easy way to let visitors change the font size of the webpage in wordpress?

The Problem is the following: I want my wordpress website to be as inclusive as it can be and would like the option of having it displayed in a dyslexic friendly font. These fonts usually do not look ...
DeimosDeist's user avatar
0 votes
1 answer
50 views

Trouble getting downloaded Google fonts to render

After using Google Font URLs for my first website, I decided to download the fonts to render them offline. I'm going through W3 Schools and CSS Tricks' pages on setting up @font-face in CSS, but I ...
dr_colossus's user avatar
0 votes
1 answer
49 views

Bookmarklet to link custom font and test not working

I made a custom font and wanted to test it on websites so I wrote this bookmarklet. I hosted the font and stylesheet on my phone with the Simple HTTP Server app. javascript:(function() { var head = ...
Peter McNaught's user avatar
0 votes
0 answers
54 views

locally used font style through @font-face does not show proper font on localhost

I am currently building a leaderboard and wanted to use this font that can be found here https://fontzone.net/font-download/autumn-regular i will also show what the font is suppose to look like below ...
Jualston's user avatar
0 votes
1 answer
185 views

How to load the google fonts in a chrome extension, so that fonts are applied irrespective of the webpage styles

I am having a chrome extension that would work on multiple webpages say twitter.com, linkedin.com, facebook.com. I am loading the following fonts https://fonts.googleapis.com/css2?family=Roboto+Mono:...
Anil Kumar's user avatar
0 votes
0 answers
295 views

Next.js loading custom fonts

How do I use custom fonts with nextjs in general and how to make it work with styled-components? Expecting for the loaded fonts to be available in css. I've tried: linking .css file with fonts loaded ...
totally-not-impressed's user avatar
2 votes
1 answer
409 views

What are the possible values for format in a font-face src?

And how to know what to use, when, and are they ever actually required? Many Websites have examples like the following, with varying orders: @font-face { font-family: 'Example'; src: url('Example....
Robin93K's user avatar
  • 198
1 vote
2 answers
197 views

Fonts don't display with Sass, React, create-react-app

I'm working on a React project made with create-react-app. I'm using Sass and the sass files transpile correctly. I have local fonts that I want to embed in the app. I use the @font-face rule ...
alienCred's user avatar
0 votes
1 answer
104 views

Custom fonts working on certain page on but not working on other pages on Mac Safari browser

I am working on a website. Website link is: https://chessteacher.org/ I am using custom font "MV Boli" on the website. I generated the font face and added the fonts item inside the child ...
jhishu singha's user avatar
1 vote
1 answer
29 views

How to make different fonts for category labels in JFreeChart

I have a list of benchmark scores and one or two selected smartphones there, so I need to highlight those smartphones. I already did this with different bar colors, but I also want to change the font ...
Denis's user avatar
  • 21
0 votes
0 answers
30 views

Why won't certain custom @font-face fonts appear on my website?

I have installed a couple custom fonts in my external style sheet to use on my webpage. Some of them work fine, but others will not show, despite being formatted the exact same way? Example: @font-...
Laura Edwards's user avatar
0 votes
0 answers
123 views

How to get "font-display" attribute to respect "unicode range"

I have a website that has a mix of Hebrew and English characters. I load a custom Hebrew font in the css like so: @font-face { font-family: 'Taamey David CLM'; src: url('TaameyDavidCLM/...
ak0000's user avatar
  • 137
0 votes
1 answer
83 views

Using Both, `@font-face` And `<link ref="preload" as="font">` In The Header?

Just wondering, what is the difference between putting the @font-face rules in a <style> tag in the header, or putting a <link ref="preload" as="font"> in the header? ...
fweth's user avatar
  • 651
0 votes
0 answers
109 views

LightHouse unused CSS do working on my page

I'm trying to improve page performance via lighthouse in Chrome dev tool, there's an opportunity to reduce unused CSS I find it in my project, it's imported and used on body{} with code - @import url(...
Tracy's user avatar
  • 1
-1 votes
1 answer
94 views

Site does not load web font

I've searched all over the internet, but the answer is probably bullshit. I'm having a problem uploading my web font to my site (the console always returns an error saying it can't download the font)....
Mirkoland's user avatar
0 votes
0 answers
132 views

multiple font faces in mui

How to Add multiple font Faces in MUI theme I used fallbacks but it doesn't work I try this but don't work const theme = createTheme({ direction: 'ltr', components: { MuiCssBaseline: { ...
Ali Safarpour's user avatar
-1 votes
1 answer
67 views

Beginner Question: How to use different font weights for the same font in the same stylesheet? [duplicate]

I have added the font face Acumin Pro Condensed twice, both with different font-weights; 400 and 700. I have tried to apply the font with both seperate weights, 400 on a h3 tag and 700 on a h2 tag, ...
ElliottMcDonald's user avatar
0 votes
0 answers
245 views

React-PDF unknown font format for custom font only when not on localhost server

I have created a PDF with react-pdf that is downloaded on click on the PDFDownloadLink that is generated within the component that hosts it. This works fine when I am viewing things on my localhost ...
physicsboy's user avatar
  • 5,694
0 votes
0 answers
93 views

@font-face not working with locally hosted file, but works fine when getting the same file from google fonts

It's the strangest thing. The following CSS works fine, but when I change out the src for the same font file locally hosted it doesn't work. So this works: @font-face { font-family: 'Varela Round'; ...
nagumi's user avatar
  • 33
0 votes
0 answers
199 views

Chrome weird outline on faux-bolded fonts depending on size

Chrome on Windows ^^^^ Chrome on Firefox^^^^ This seems to only happen at certain sizes and letters when the font in question does not have a supplied "bold" weight but one is declared in ...
hrood's user avatar
  • 401
0 votes
0 answers
30 views

Detecting which font subsets needs to load for a given HTML

Given a HTML element uses multiple fontFace's consisting of different subsets how to determine the final list of font subsets, that must be loaded to render the HTML? it is not only about the ...
Peter Lapisu's user avatar
  • 19.9k

1
2 3 4 5
69