Questions tagged [font-face]
@font-face is a CSS rule that allows the definition of embedded fonts within a webpage.
3,357
questions
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 ...
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 ...
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 ...
- 1,186
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:...
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 ...
- 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 ...
- 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 ...
- 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
...
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 ...
- 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 ...
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/...
- 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&...
- 164
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'...
- 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");
...
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, ...
- 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.
- 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 ...
- 488
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');
...
- 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 ...
- 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: ...
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 ...
- 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 {
...
- 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 ...
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 ...
- 513
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 ...
- 33
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 ...
- 15
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....
- 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 {% ...
- 1,779
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 ...
- 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 ...
- 11
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, ...
- 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: ...
- 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-...
- 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 ...
- 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 ...
- 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-...
- 101
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 (...
- 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 ...
- 503
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>
<...
- 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 ...
- 103
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 ...
- 11.1k
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 ...
- 103
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 {
...
- 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 ...
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: ...
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 ...
- 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 ...
- 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 ...
- 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/...
- 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" ...