Questions tagged [font-face]

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

font-face
Filter by
Sorted by
Tagged with
0 votes
1 answer
90 views

Property 'add' does not exist on type 'FontFaceSet'

I'm following the Adding a font to a document or worker from the developer mozilla website. This is the code they're sharing // Define a FontFace const font = new FontFace("myfont", "...
-1 votes
1 answer
29 views

@font-face ignored for local font

So I'm trying to create alias for some fonts and aliases are just ignored without any obvious reason. Check out this example. So I just created alias with name "Test" for "PingFang SC&...
3 votes
1 answer
205 views

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 ...
3 votes
2 answers
809 views

How do I use fallback fonts in JavaFX?

For a project I am currently working on in JavaFX, I want the user to be able to enter a name of a Deck which can contain multiple languages (e.g. 日本語 N4 Vocab). To be able to display fonts from ...
61 votes
11 answers
51k views

Flash of unstyled content (FOUC) in Firefox only? Is FF slow renderer?

I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied. ...
-1 votes
1 answer
18 views

Is there @font-face support in gmail — via iOS Mail

I was hoping someone might know whether @font-face will be supported for gmail accounts when viewed via the iOS Mail app. Gmail doesn't support @font-face, whereas iOS Mail does, but I can't find any ...
-1 votes
0 answers
30 views

Wordpress font not loading in Safari

In my Wordpress website I have set up the Klavika font as followed: @font-face { font-family: 'klavika'; font-weight: 400; font-style: normal; src: url('path/fonts/KlavikaCH-Regular.otf'), ...
1 vote
1 answer
31 views

How to update all label's text properties after changing default_font in Kivy?

How can I update all of my Kivy widgets to use the new default_font on runtime (without restarting the app)? I created a Settings screen in my kivy app where a user can select the font that they want ...
11 votes
3 answers
84k views

Bold text in the from field: <input>?

Today when I filled my calendar at google I saw that the description of the event is in bold font: <input id=":g" name=":g" type="text" class="textinput" dir="ltr"> Is it possible to render ...
551 votes
9 answers
289k views

How to add multiple font files for the same font?

I'm looking at the MDC page for the @font-face CSS rule, but I don't get one thing. I have separate files for bold, italic and bold + italic. How can I embed all three files in one @font-face rule? ...
0 votes
2 answers
150 views

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 ...
3 votes
0 answers
111 views

<stdin>:14:11: ERROR: [plugin: angular-css-resource] Could not resolve "open-sans/cyrillic-italic_300.woff2" issue while Update angular 16 to 17

Got below error while updating angular V16 to V17. [ERROR] Could not resolve "open-sans/latin_700.woff2" [plugin angular-css-resource] <stdin>:581:11: 581 │ src: url("open-...
16 votes
9 answers
68k views

Can I use "Arial Rounded MT Bold" with css?

Can I use "Arial Rounded MT Bold" with css ? font-family:"Arial Rounded MT Bold", Arial, Helvetica, sans-serif; Nothing Changed when I put : font-family:Arial, Helvetica, sans-serif;
0 votes
1 answer
63 views

Change font-display - when I don't control @font-face stylesheet

I'm using the Monotype Fonts subscription. Unfortunately in the Monotype stylesheet font-display is set to swap which results in Flash of Unstyled Text. How can I have font-display set to block to get ...
5 votes
1 answer
1k 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....
261 votes
6 answers
197k views

Multiple font-weights, one @font-face query

I have to import the Klavika font and I've received it in multiple shapes and sizes: Klavika-Bold-Italic.otf Klavika-Bold.otf Klavika-Light-Italic.otf Klavika-Light.otf Klavika-Medium-Italic.otf ...
0 votes
0 answers
38 views

Font-face icons not displayed correctly after jdk and struts update

I recently upgrade the version of struts2 used by my project from 2.3.37 to 2.5.33 following the migration guide here. To do so, we had to update the jdk version 6 to 7. Everything seemed to work fine ...
0 votes
2 answers
192 views

CSS ascent-override and descent-override workaround for Safari

I have three of fonts I may use together on a single line. (Emojis I wrap in <span> and set the emoji font-family since Inter has its own characters for some glyphs like heart.) I’ve found the ...
0 votes
1 answer
1k views

How to use font svg icon

I have a font svg icon file. It looks like this <svg xmlns="http://www.w3.org/2000/svg"> <metadata>Generated by IcoMoon</metadata> <defs> <font id="...
0 votes
1 answer
1k views

Draw Font Awesome icons to canvas based on class names

I want to be able to: Get the Font Awesome 5 unicode character for any given Font Awesome class name (fas fa-check-circle, etc...) Draw that unicode character to an html5 canvas How would I go about ...
0 votes
1 answer
41 views

Use custom fonts when converting SVG to GraphicNode in Batik

I am trying to embed a SVG into a PDF using both Apache Batik and OpenPDF libraries in Java. For this purpose, following a tutorial, I need to create a GraphicsNode, that later will be converted into ...
4 votes
4 answers
2k views

How to imitate a monospace font with a variable-width font?

(Edit: I only need this for the 10 digits 0..9, can I hardcode the letter width for each one of the 10 digits in the CSS file?) I have read CSS - Make sans-serif font imitate monospace font but the ...
73 votes
4 answers
60k views

Where to see font files loaded by chrome in the inspector?

What tab in chrome inspector shows the font files you're loading via font-face? I can't find it under resources. I'm having an issue where one group of font-family files are loading, but another font-...
1 vote
2 answers
180 views

Woff2 Font-Family warning message about MaxZones

I am trying to use a Woff2 font called "Atkinson Hyperlegible". The font can be found here: https://brailleinstitute.org/freefont It's a very popular font. But when I import it, and I use ...
0 votes
0 answers
12 views

include a local custom font in bookdown

In my project folder I have an assets folder that contains font files. BCSans-Bold.woff BCsans-Regular.woff etc. My _output.yml file points to my css bookdown::gitbook: css: assets/style.css and ...
9 votes
1 answer
8k views

How can I prevent web fonts from being downloaded and used illegally?

I have a project where I am using an embedded font using @font-face in CSS. Everything is working fine but the site owner wants to encrypt the font so that no one can use it other than when viewed on ...
0 votes
0 answers
56 views

Add font in the browserleaks.com\fonts in the chromium browser code

I am working on the Chromium browser codebase and aiming to dynamically add custom fonts to the font metrics section on browserleaks.com/font. Although I've tried installing the font manually by ...
0 votes
2 answers
55 views

Does it make sense to create worker.js to handle promises?

I am building an electron app that allows the user to load font files from their local drive as FontFace instances or to FontFace. In some cases, there will be tens of thousands of files and therefore ...
0 votes
0 answers
30 views

Detecting Warnings from new FontFace.load() / document.fonts.add()

I am building an electron app that allows users to provide paths to local font files. Sometimes warnings are cast when loading these font files dynamically, in which case the local fonts are not ...
0 votes
2 answers
99 views

string of only numbers not parsed correctly by CSS

font.newFileName is a string of only numbers: '000001101', '000001102', '000001103', so on and so forth. If font.newFileName in new FontFace and setProperty is prefixed with a letter or changed to a${...
20 votes
2 answers
16k views

how to remove characters from a font file?

i've downloaded the DejaVu open source font and want to use it ad a WebFont, but even when converting it, i get a large file, and because the website i'll use will be only in few languages (arabic, ...
-2 votes
2 answers
3k views

Making an app that changes device fonts for galaxy phones

I want to make an app that can change system font style in galaxy phone after installing my app user can change font from Setting>my Device >font style and choose from list without requiring ...
0 votes
0 answers
49 views

Custom fonts not showing on different platforms/browsers

I'm currently using the platform Quickbutik to design a website, and I'm using @font-face to import custom fonts as seen below: @font-face { font-family: 'Gambarino-Regular'; ...
2 votes
2 answers
857 views

webpack: new css-loader 4.0.0 tries to load fonts (make them embded); how to disable this?

In my styles I have such font-faces definition: @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: local('Material Icons'), local('MaterialIcons-...
1 vote
2 answers
98 views

Move @font-face declaration from global CSS into MUI Theme

I have the below index.css file: //Index.css ... @font-face { font-family: "My Font"; font-style: normal; font-display: swap; font-weight: 400; src: url(/public/fonts/my-font.eot); ...
0 votes
1 answer
125 views

Browser default font loads instead of fallback font

I'm struggling to get my fallback font to load properly. I've got arial dialed in as a fallback font with the help of the new ascent-override, descent-override, and size-adjust properties. But when ...
391 votes
3 answers
187k views

Why should we include ttf, eot, woff, svg,... in a font-face

In CSS3 font-face, there are multiple font types included like ttf, eot, woff, svg and cff. Why should we use all of these types? If they are special to different browsers, why is the number of them ...
344 votes
20 answers
366k views

Unicode character for "X" cancel / close?

I want to create a close button using CSS only. I'm sure I'm not the first to do this, so does anyone know which font has an 'x' the same width as height, so that it can be used cross-browser to look ...
0 votes
0 answers
12 views

Receiving server error when downloading fonts

I am getting a series of server errors when trying to download fonts. In the Network tab of the Chrome debug tools I see the URL, type (font) and the status (500). I was wondering if there was ...
2 votes
3 answers
2k views

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 ...
1 vote
1 answer
83 views

Only two out of the three fonts listed in <style> show up

I'm having issues with fonts. I was doing some tests with HTML, and I had three fonts listed. all three are listed exactly the same, as you can see below: <style> @font-face { font-...
6 votes
1 answer
9k views

Custom font not working on mobile devices

I have used CSS rule @font-face for my font Rajdhani. Works perfect on desktop but not on Android and IOS devices: @font-face { font-family: "Rajdhani"; src: url("/fonts/rajdhani-light.ttf") ...
0 votes
4 answers
10k views

Why is Google font not working?

I am using Google font from http://www.google.com/webfonts/earlyaccess but it's not working as it suppose to. Any ideas. I set up a basic version at http://jsfiddle.net/UbDcg/4/ which is not working ...
0 votes
1 answer
81 views

My @font-face is not working on mobile devices on users end

So I have completed my portfolio website by pure html and css, no wordpress or other website builders, and I've already hosted it online. I am using the font GT Walsheim Pro that I've downloaded from ...
2 votes
1 answer
423 views

check font is loaded with document.fonts.check and it always return true

I'm trying to check if certain font is loaded with the FontFaceSet#check() API but it always returns true to me, no matter what random stuff I put. I tried in both Chrome and Safari, with the same ...
0 votes
1 answer
123 views

Having issues with Tailwind and custom fonts

My client sent me three fonts, two of which came in the form of a collection of otf files, a "regular," and some variants (i.e., thin, bold, etc.) I'm having trouble with the variants not ...
0 votes
0 answers
46 views

@font-face not showing when css is placed in folder

@font-face does not work when i place the CSS file in any folder except the project root folder (/project). I could change the location of the font file for all I care and the @font-face url is ...
113 votes
13 answers
129k views

Wait for fonts to load before rendering web page

I'm using @font-face to embed fonts in my website. First the text renders as the system default, and then (once the font file has loaded presumably) the correct font renders a fraction of a second ...
3 votes
2 answers
7k views

Font in Chrome is too fuzzy - how can I fix this?

I am using font Segoe UI and in a particular section on the site, the font is very blurred in Google Chrome. I am also uploading the live site: http://impressivefirm.com/dynamics365 Below are the ...
0 votes
1 answer
140 views

Set default font family in Plotly.js

Is there a way to globally set the default font family for Plotly.js? Currently it defaults to 'Open Sans', 'Verdana', 'sans-serif', but I would like to override that within an application to use ...

1
2 3 4 5
69