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
0votes
1answer
15views

CSS Import Font doesn’t work on live server but works on jsfiddle

I’m trying to import custom font on my web page but I see no change on live server, when I’m trying my code on jsfiddle everything works perfectly. I was trying to disable cache but it doesn’t work ...
user avatar
0votes
1answer
28views

Web Font Links Fail to Work on Github Pages but Work Locally

I'm trying to use two web fonts, Bahnschrift and Blanka Regular on my Github Pages site. I'm using CDN Importing in my <head>. I have the Blanka font working locally, but when exported the ...
user avatar
0votes
0answers
31views

CervoNeue font issue

I have a question regarding the CervoNeue font. For some reason when the font looks like this on a website (as you can see there are some letters that look weird, and this only happens if the screen ...
user avatar
0votes
1answer
19views

I created a @font-face it's works well on IOS but it doesn't work on android

Link is here: hevalnergiz.github.io/you (Look at the words "Biz kimiz?". They use Calton Elegance.) I wrote that code @font-face { font-family: 'Calton Elegance Sans-Regular'; font-style:...
user avatar
0votes
0answers
18views

Fonts doesn't work after big edit for css file

I had website with bad reading css code cuz I didn't wrote it so I had to edit that and now it looks better but I've got a problem with fonts. they just stop working I don't know where this problem ...
user avatar
  • 1
0votes
0answers
20views

Load fonts in firefox web extension

I'm trying to port my chrome extension to firefox, but I'm having a hard time loading fonts in content scripts. I have my font files bundled with the extension, then I load the content script with css ...
user avatar
  • 13
-2votes
2answers
80views

How to load a custom web font face from my server using <link href=... format inside the header tags

I don't want the render blocking of declaring a custom font using @font-face, so I've tried to copy how my google font CDN font is loaded for my custom server font, arriving at this: <noscript ...
user avatar
  • 889
0votes
0answers
23views

htmlTTF File from Google FOnts doesnt work how can i fix this?

I don't know what's the problem, is it the quotation or is it something else? My code is below I use Bootstrap Heading tag and the id is "title", please help me out, thank you in advance ...
user avatar
0votes
1answer
18views

Is it possible to use a custom font in a page but the user not be able to download it?

I am using a custom font for a web page with font-face. I use node as a back-end with express and I have the custom font in a "public" folder. Is it possible to hide somehow the font from ...
user avatar
  • 433
1vote
1answer
37views

Why would defining `font-weight` affect loading time for large lists of data?

I work on an app (PHP), where we had delays in loading time. Smaller lists would load within a second or two. Larger lists would take up to 30-45 seconds to display. Lists include checkboxes to manage ...
user avatar
0votes
0answers
23views

font import using font-face not working on Safari

I'm using font-face on my website and it works well on all browsers but Safari. @font-face { font-family: Apfel; font-display: swap; src: local('Apfel'), local('Apfel-Regular'), url("/static/...
user avatar
  • 1
0votes
1answer
48views

How to correctly preload a font whose filename is hashed, and whose style is in a CDN?

I would like to preload Material Icons font thanks to: <link rel="preload" href="https://fonts.gstatic.com/s/materialicons/v125/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2" as="font&...
user avatar
0votes
0answers
21views

In react app, how to set CSS font-face unicode-range to include chinese characters?

In my create-react-app, i have set this in the css .App { text-align: center; font-family: 'Times New Roman', Arial; } @font-face { font-family: 'Times New Roman'; src: local('Times New Roman'...
user avatar
  • 1
0votes
1answer
25views

@font-face not working locally but works when linked externally

So, I have a .ttf font (plus others) that I'm using for a website, with the code formatted as follows: @font-face { font-family: DEP; src: local("fonts/DEP/DEP.ttf") format("truetype"); ...
user avatar
0votes
1answer
21views

How I can use the differents font size of a *.ttf file?

I downloaded differents *.ttf font files. In these files there is a lot of available sizes. However, i see no font-size attributes in the @font-face declaration in css files. There is style (normal, ...
user avatar
  • 309
1vote
1answer
31views

JavaFX Custom Font

How to set a custom font to JavaFX (Java 17, OpenJFX)? I tried copying files to the resources/fonts folder and importing them via @font-face in CSS. It didn't work. Also tried @import - no use.
user avatar
  • 167
0votes
1answer
57views

@font-face src: local() doesn't work on Android

(Sorry I didn't find it before I figured out Chrome-Android also doesn't work. The Chrome-Android used a fallback-to-sys-default-font-trick and it did trick me) I was going to use unicode-range but ...
user avatar
0votes
1answer
37views

Why are my custom fonts not working on mobile devices?

Why won't my custom font work for mobile but it works fine on desktop? This is the code I put at the top of my css file: @font-face { font-family: 'NewYork'; src: url('fonts/NewYork.eot'); ...
user avatar
  • 3
0votes
0answers
14views

How to prefer user’s local font instead of download with html head link?

This is, I think, the very same issue as found in Chrome prefers web font over local font, posted waaay back in 2018, but that question asks (and is answered) “why?” I’d like to know how to stop the ...
user avatar
  • 5,845
0votes
2answers
55views

I add font but they doesn't work (css) @font_face

.writing { display: block; margin-top: auto; margin-bottom: auto; text-shadow: 5px 5px red, 10px 10px green, 15px 15px yellow; font-family: Niconne; text-align: ...
user avatar
2votes
0answers
25views

Explanation of "hardcoded" font on a piece of text, and how to remove it via CSS etc

I'm unable to understand how a piece of text has some kind of hardcoded font in it, that cannot be removed even after pasting into an RTE, application of CSS etc. See 2 examples below copied from ...
user avatar
  • 191
-2votes
1answer
27views

i cant get fontface to work no matter what i do

im trying to upload a custom font from my pc using @font-face but its just not working no matter what ive tried. heres what i have currently in my style.css folder. <style> @font-face { ...
user avatar
  • 1
3votes
0answers
55views

How to detect browser support for @font-face descriptors using CSS.supports()

You can detect if a browser supports a specific or multiple CSS features using the CSS.supports function. It can receive two parameters, the first one is the name of the feature and the second one is ...
user avatar
2votes
1answer
118views

react-admin add font with override MuiCssBaseline @global @font-face not working

I am trying to add the NotoSansSC-Regular.otf from Google to react-admin so that the default font for simplified Chinese will be that. I have successfully got it working if I do a CSS include of the ...
user avatar
1vote
1answer
33views

CSS, use @supports to detect @font-face support

Is it possible to use @supports to check if the client's browser supports '@font-face? My goal is to use several @font-face by default, and if it's not supported, then fallback to another font-family ...
user avatar
0votes
1answer
57views

How do I make the unicode-range in @font-face for only load Latin characters? (css)

I'm using only the Latin range characters for website, but in my woff2/ttf there are many other types of characters like Š Č â... How do I sets the specific range for only Latin characters using ...
user avatar
0votes
1answer
63views

Changing the font of atom label in rdkit

I'm trying to change the font type of the atom labels in RDKIT. The default font type is 'sans'. I ran this code on colab: from rdkit import Chem from rdkit.Chem.Draw import IPythonConsole from rdkit....
user avatar
  • 1
0votes
1answer
49views

Custom font face not requested by browsers

I know that questions with similar titles already exist, but after reading them, I'm still stuck. I'm developing a website using Django and serving static files (css and js) with no problem using {% ...
user avatar
1vote
0answers
174views

I have CSP problem in ExpressJS with cors, helmet package

How are you? I have some CSP problem in ExpressJS. If I only use helmet, it dose not happen. However, When I used cors package with helmet, browser throw error about font. I don't understand this ...
user avatar
  • 13
0votes
0answers
25views

How to implement Zawgyi font properly

My application serving Burmese language , when a user select the language as Burmese i am programmatically loading Zawgyi font using Zawgyi-One.ttf file, /**Adding Custom Font for Burmese ...
user avatar
0votes
3answers
69views

How to set font size and font family at the same p

Can you give me a sample code on how to make a paragraph/text with text size and font, I only know the code that uses different sizes without font, and the code with the font but without resizing, ...
user avatar
  • 9
0votes
1answer
148views

ttf file in @font-face is not working on a Windows laptop

I'm new to web dev, not sure if this is a common issue. I was trying to use font-face to implement a font in TTF format. I tried @font-face { font-family: "Univers-light-normal"; src: ...
user avatar
  • 33
1vote
1answer
288views

Use Local Font in Next.js

I'm struggling to get a local font to work on my Next.js website and can't seem to find much on it. I used @font-face in my globals.css style-sheet. (I referenced https://kirazhang.com/posts/nextjs-...
user avatar
  • 39
0votes
1answer
61views

Self hosted font does not work on dev server

I'm having an issue, we needed to get rid of links to external resources in html file(as google api font and material icons). So I self hosted it, on localhost in network font is received and works ...
user avatar
  • 17
0votes
1answer
58views

Why is Chrome not displaying my @font-face?

I am loading a Hello World html file in Chrome 95, with a declared @font-face loaded from Google fonts. The font is correctly loading, which I can verify in the Network tab, but for some reason my div ...
user avatar
  • 352
0votes
1answer
240views

Laravel DomPDF Custom Font Face Shows Square Boxes

I am trying to generate a PDF that will contain Chinese characters using dompdf and hence I downloaded the font package and added the following code in my blade.php. @font-face { font-...
user avatar
0votes
2answers
148views

Browser cannot get woff font file using @font-face

For my server I wish to enable dynamic loading of fonts. The server runs with nestjs I host the .woff files in a directory on the server named 'fonts'. The @font-face is constructed dynamically (...
user avatar
  • 33
0votes
0answers
13views

Protecting a licensed font on a web server [duplicate]

I want to use a licensed font as a custom font in a web site that is distributed to customers to mount on their own servers. If we keep the font on our server and make the style sheet refer to it ...
user avatar
0votes
0answers
25views

How to display text on canvas without antialiasing [duplicate]

Is it possible to display text on canvas without antialiasing? I am trying to display a fixed monospace font https://int10h.org/oldschool-pc-fonts/fontlist/font?ast_premiumexec <html> <...
user avatar
  • 536
1vote
1answer
300views

Add font-face via css-modules to rollup bundle

So I'm trying to create a component library with rollup and I want a font to work that I have added via font-face. I looked at this https://github.com/rollup/plugins/tree/master/packages/url but I can ...
user avatar
1vote
2answers
252views

W3C CSS validator is giving errors on @font-face unicode-range

Since few days ago W3C CSS validator started to be more strict and started to give errors on this type of CSS3 implementation (this type of CSS3 files are everywhere and they were used for example by ...
user avatar
0votes
1answer
367views

Add @fontface to Storybook

I have a Storybook created in a create-react-app and I want to add a font-face to it. My components are using css-modules (maybe that is useful information). So, I have created a webpack.config.js ...
user avatar
1vote
2answers
67views

Google PageSpeed "Ensure text remains visible" with 0ms potential saving

Image reference of the 0ms potential saving message I keep getting this warning in Google PageSpeed and now I'm totally out of ideas. I'm using the following code to set the font-family: @font-face { ...
user avatar
  • 43
-1votes
1answer
94views

Custom Font Face does not render on other computers on Wordpress

I recently started a project on Wordpress where the custom font face I implemented doesn't seem to work on other computers. The website is grubexotic.com I created a child theme, and simply put the ...
user avatar
0votes
2answers
34views

Change font-family for my website without tff

Having a difficult time trying to get the proper .ttf file from the font family and set-up into my website. https://freefontsdownload.net/free-futura_bk_bt-font-73014.htm body { font-family: ...
user avatar
0votes
0answers
27views

Less css import font with @font-face

I have been making a ui and syntax theme for Atom, which uses Less CSS to handle styling. Now, my question is this: How do I import a font using Less CSS, because I have been trying and it cannot find ...
user avatar
  • 507
0votes
0answers
31views

Firefox sanitizer rejecting font in React styled components, but works in old-school CSS

I'm stumbling through some React tutorials and tried my hand at switching my CSS files to CSS-in-JS through the Styled Components plugin. When I did this, the Firefox sanitizer rejected the fonts it ...
user avatar
  • 379
0votes
1answer
37views

Why my chrome extension download my custom font on every element render?

I have a chrome extension with custom font, it works properly, I can see that the font is downloaded in devtools network tab. But every time my extension renders my react components, my custom font ...
user avatar
  • 23
0votes
0answers
29views

Loading @Font-face with eot file issues

I am trying to load a font from a folder using sass like so: @font-face { font-family: "myFont"; font-style: normal; font-weight: 300; src: url("/wwwroot/assets/fonts/...
user avatar
  • 610
0votes
0answers
18views

Why won't my Webfont load with gulp4 task

I'm relatively new to gulp. I've just installed boilerplate with gulp4 which works fine except for fonts. The error message is downloadable font: download failed (font-family: "Butler" ...
user avatar

15 30 50 per page
1
2 3 4 5
68