Questions tagged [font-face]
@font-face is a CSS rule that allows the definition of embedded fonts within a webpage.
3,437
questions
-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 ...
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 ...
-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 ...
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 ...
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('...
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 ...
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 ...
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:
...
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 ...
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.
...
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 ...
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-...
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/...
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 ...
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 ...
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 @...
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 ...
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 ...
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 ...
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 ...
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....
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 {
...
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 ...
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 ...
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 ...
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 ...
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
&...
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 ...
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 ...
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 ...
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 ...
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 = ...
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
...
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:...
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 ...
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....
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 ...
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 ...
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 ...
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-...
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/...
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?
...
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(...
-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)....
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: {
...
-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, ...
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 ...
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';
...
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 ...
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 ...