Questions tagged [webfonts]

Technology that enables people to use fonts on demand over the Web without requiring installation in the operating system.

Filter by
Sorted by
Tagged with
0 votes
3 answers
74 views

I am not getting "CSS rules to specify families" in google fonts

I am trying to get the font family CSS (on the google font website) which is used to define font family properties for the selected font applied to content. Usually, you see a code block "CSS ...
Harsh Rawat's user avatar
0 votes
1 answer
67 views

Nabla font doesn’t have the correct fill color on iPhones

Should be orange color font here This is how the font should be displayed on iPhone In my code I only adjust the font size when making the site mobile friendly. On Android phones it appears 'normal' ...
adam's user avatar
  • 31
0 votes
0 answers
24 views

Partial display of text

Cyrillic text is partially displayed this is how looks html was: META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1 I change in: META HTTP-EQUIV="Content-Type&...
Nikola Ćosić's user avatar
0 votes
1 answer
19 views

Create react app how to make font accessible on other devices

I am working on a react project and am having font issues. When I view the app on my laptop, the font that I set shows up, but when I view that app on my iphone the font returns to the default font ...
Victor 's user avatar
  • 331
0 votes
1 answer
42 views

Webfonts not working in mail loaded via stylesheet `link`

I replaced @font-face linking to fonts.gstatic.com with a "stylesheet" link tag linking to font-source-sans-pro-300.e7f3684c.css generated by Webpack Encore using Fontsource. Working: Using @...
goulashsoup's user avatar
  • 2,718
0 votes
1 answer
47 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
0 votes
0 answers
49 views

Unable to Identify Icon Set Family

I have a bootstrap/HTML template in which an Icon Family is present which i tried a lot to identify and search but i couldn't. Empty boxes are being shown instead of icons. I tried to search it as ...
Ivance Edwards's user avatar
0 votes
0 answers
55 views

How can I fix the height difference between letters in a custom ttf that is rendered in HTML?

I am trying to create a custom ttf file using font forge. The purpose of building a single custom ttf file is to use all alpha-numeric characters (a-zA-Z0-9) of the 3 fonts as 1 font file. . The fonts ...
user22435635's user avatar
0 votes
0 answers
118 views

How to force crisp edges on text with pixelated fonts

I am trying to make something that uses a pixelated font, but I can't seem to get the pixels to stay crisp. When using the pixelated font, it simply adds some kind of anti-aliasing, even though I ...
Joeytje50's user avatar
  • 18.7k
0 votes
0 answers
94 views

Libre Barcode 39 Font doesn't appear on mobile device email client

I have an Email written in html containing the following CSS: @font-face { font-family: 'Libre Barcode 39'; font-style: normal; font-weight: 400; font-...
Illuminae's user avatar
0 votes
0 answers
34 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
1 vote
1 answer
54 views

Display alternative font character with CSS

I'm building a website on Squarespace and am using a web font that I bought. It has an alternative for "A" that I want to use instead of the default. Within the CSS Panel on Squarespace I've ...
Gabrielle Gendron's user avatar
1 vote
1 answer
80 views

Controlling the visual presentation form/rendering of Arabic text on the web?

and are samples of the exact same Arabic text with the exact same font, rendered differently in respectively Chrome and Firefox. The latter in Firefox is the most accurate rendering of the Arabic ...
imdk4242's user avatar
1 vote
0 answers
35 views

Mathematical frak 𝔅 with subscript 'x' in ggplot2 label

I want to have 𝔅 with subscript 'x' (normal R font). It doesn't need to be using the font_add_google function, any solution is appreciated. Thanks! The unicode is U1D505 if this might be helpful. ...
JR96's user avatar
  • 11
0 votes
1 answer
39 views

How to Color-code Manchu/Mongolian Script on Webpage?

My odyssey started from a rather simple task. I had a Manchu word in the traditional script and I wanted to change all the vowels in the word (ignoring ligatures) to a different color <p>ᠠᠮᠪᡠᠯᠠ ...
Quantum Duck's user avatar
0 votes
0 answers
246 views

How can I implement Adobe Fonts on a website and still maintain strong Core Web Vitals scores?

I'm working on a website (https://georgiaencyclopedia.org) where I need to use Adobe Fonts (previously Typekit) for the serif typeface. I feel like I have tried everything to improve Core Web Vitals ...
Martin Parets's user avatar
0 votes
1 answer
101 views

Unable to convert Adobe Type 1 font to ttf/woff format successfully

I have one document written using one Adobe Type 1 font. Now I want to show its contain in a html website. I tried to convert this font to ttf/woff format but all online available tools either failing ...
KSharma's user avatar
0 votes
1 answer
287 views

Jump when loading fonts in NextJS 13.4.x

Local font is loaded, path in public directory. Development mode. Disable cache in browser/network flag is set opposite. As a result, when the page is reloaded, the font jumps. That is, it is loaded ...
Gabber's user avatar
  • 1
0 votes
0 answers
73 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
102 views

Generate custom icon font

We'd like to generate a custom icon font and use it like this one: https://github.com/marella/material-icons We have used fantasticon to generate the woff files and it works fine, if we set the icon ...
Michael1312's user avatar
0 votes
0 answers
94 views

How to use a .tff font in a Quarto webpage?

I'm trying to use CaskaydiaCove Nerd Font as my default monofont. Yet I can't find any linkable version of it, only the original Cascadia Code on CDN Fonts but it doesn't have the glyphs I want. Is ...
Jakub Jędrusiak's user avatar
0 votes
0 answers
20 views

IBM Plex .woff/.woff2 fonts not displaying properly with mix up of uppercase and lowercase

Headings are using different font-family to the content, and headings are displaying properly. The content should be IBM Plex with both .woff and .woff2 formats available but it looks very buggy with ...
soosan's user avatar
  • 1
0 votes
2 answers
188 views

Change Bold Color in SCSS Script

I'm a beginner struggling with the basic task of changing Bold Text Color in a pre-scripted scss file. I just can't find an obvious solution. The API appears to predefine color parameters and I ...
Bornogo's user avatar
0 votes
0 answers
64 views

Why does chrome convert open sans font to cursive?

Disclaimer: This is totally not a CSS problem, but likely a bug with my Google Chrome installation. For a while, I've noticed sites using the style: font-family: Open sans, sans-serif, ends up ...
I Want Answers's user avatar
0 votes
0 answers
276 views

Google Fonts: Which is faster? rel="preconnect" or WebFontLoader?

For several months I have been using the Google WebFontLoader Javascript code to asynchronously load Inter and Nunito fonts from Google Fonts: WebFontConfig = { google: { families: ["...
Sergio Yael A.'s user avatar
0 votes
0 answers
70 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
1 vote
0 answers
240 views

Adobe Typekit - Pagespeed Insights - Ensure text remains visible during webfont load

I have tried everything to get font-display to work for my Adobe Typekit font. I am still getting the error "Ensure text remains visible during webfont load" in google pagespeed insights. I ...
Danielle Roberson's user avatar
0 votes
0 answers
69 views

Is it possiable to get the base64 chinese font from document.fonts and pass it to `addFileToVFS` in jspdf

I want to use jspdf to generate a pdf file in browser. However, chinese font is not supported in jsPdf. So I have to use addFileToVFS to add chinese font. But the font file is too large! So now it ...
蔡敏健's user avatar
0 votes
0 answers
165 views

What fallback default font can I use to replace helvetica neue on windows machines (support text bold for asian chars)?

My website doesn't render font-weight: 500 for asian chars on windows machines. I'm declaring font-family this way: font-family: Gordita,Helvetica Neue,Helvetica,Arial,sans-serif I noticed that it ...
sergioviniciuss's user avatar
-1 votes
1 answer
133 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
-2 votes
2 answers
322 views

Why is there a Flash of Unstyled Text in Chrome?

I have an html doc with various scripts and stylesheets and google fonts etc, that is mostly optimized to prevent the display of any unstyled content. Relevant bits: <head> <...
Aaron Parisi's user avatar
0 votes
1 answer
37 views

Android Chip with material font icon text not wrapping correctly

In my Android app I have a recyclerview with chips inside, and some chip has not just normal text but icons from the material font. @Override public void onBindViewHolder(final ViewHolder holder, ...
P5music's user avatar
  • 3,217
1 vote
0 answers
15 views

What's the benefit of using fontOptimization in nextJS?

Doesn't allowing my fonts to be served from https://fonts.gstatic.com/s/ make my page load faster and reduce my traffic costs (especially at scale on a large e-comm website)? Why would I want to use ...
cmcculloh's user avatar
  • 47.8k
0 votes
0 answers
97 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
255 views

Font whose glyphs all display as missing characters, might be named 'nosuchglyph'

I could use a font that might be named 'nosuchglyph'. This could be used for testing a font on the web with a font stack specified something like style="font-family:'Some Font Regular', '...
mhd's user avatar
  • 115
0 votes
1 answer
50 views

Issue in adding font to Application.Current.Resources after downloading font file at runtime in UWP?

I have requirement of downloading font files at runtime and apply that Font to the text. I successfully download the font file and added it to the Windows.ApplicationModel.Package.Current....
pavan kumar's user avatar
1 vote
0 answers
234 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
  • 441
0 votes
0 answers
112 views

Use system fonts first in CSS, then fallback to web font

I want to use system fonts first and fallback to a web font, but it is not working as expected. Demo: https://jsfiddle.net/60s8mgpu/ Result in my browser: When I set font-family: sans-serif,'Arimo'; ...
djstrong's user avatar
  • 124
0 votes
1 answer
300 views

How to integrate Fontawesome 6 Pro self hosted icons with HTML5 canvas?

I have a react project and hosted the fonts by myself following this guide my folders looks like this: src |___fonts | |___css | | |___fontawesome.css | | |___regular.css | |___webfonts | ...
user8922252's user avatar
0 votes
0 answers
213 views

How to get more font weights from Google Fonts than what they provide (or, how does Figma do it)?

Looking at the Lato Google Font... They provide font weights of 300, 400, 700 and 900. If I use the provided links/stylesheet or attach the font files directly, I can only use those sizes. If I try ...
Birrel's user avatar
  • 4,764
0 votes
0 answers
142 views

Multiple woff2 font files or a single ttf with multiple formats (converted to a woff2)? - which is faster

I have apparently found out that I can convert ttf variable font file from google fonts to a compressed woff2 file (50% reduced file) using this site: https://cloudconvert.com/ttf-converter I am ...
Rodin's user avatar
  • 17
0 votes
2 answers
92 views

HTML Canvas 2DContext.font - Font's size has no effect - Google Font "Exo 2" might be at fault?

I am creating a canvas & filling it up with text. It works perfectly with different fonts EXCEPT for Exo 2. Exo 2 is a Google font, and I suspect that maybe the trailing "2" is causing ...
GabeyBaby's user avatar
0 votes
1 answer
207 views

why the same font at different web brower have different looks?

picture I found that the font 'monospace' have diferent styles at my Chrome and Brave web browser. Can someone tell me why? I also checked my Microsoft Edge, it has the same style as Brave. I think ...
Garvie Zhao's user avatar
2 votes
1 answer
953 views

Preloading imported fonts in Vue3/Vite/Rollup

How do I preload a font imported from an npm package in a Vue3 (vite/rollup) application? eg: I've referenced the material font library: npm install --save material-symbols and imported it in main.js:...
Brad Robinson's user avatar
1 vote
2 answers
444 views

How can I install Roboto font locally in my Hugo Wowchemy Site?

I'm setting up a new static website using Hugo and Wowchemy. Wowchemy uses the font Roboto, and I want to provide it locally with my website. That's what I did: I installed the font files (TTF; WOFF) ...
Public Image Ltd.'s user avatar
0 votes
1 answer
158 views

Newer versions of Firefox, Chromium wont load webfont, if font is installed locally?

I noticed in the dev tools network pane, that my font files are not showing up. (Roboto) Fonts are used only as local files in a webserver folder, embedded with css @font-face as eot, woff2, woff, ttf ...
Ham's user avatar
  • 11
-1 votes
1 answer
415 views

Font Awesome issues showing error messages

I downloaded font awesome 5 to use for free,but when I load it I get an error message showing:Also define the standard property 'filter' for compatibility css(vendorPrefix) and also a small looking ...
Steve purpose's user avatar
0 votes
1 answer
438 views

FontFaceSet : check Could not resolve font family names including digits

I'm using the google font API to retrieves all google fonts. I got all the fonts as a Object contains each font item like the following : { "family" : "Roboto", "...
mehdibe's user avatar
  • 177
0 votes
1 answer
97 views

Pre-loading fonts

Do i need to use both rel="preload" and font-display="swap". Since rel="preload" prefetches the required font, is it necessary to add font-display attribute too? <link ...
Sathik Basha's user avatar
0 votes
1 answer
387 views

Font difference in Mac and Windows on website

I've been facing font line-height issue in either one of Windows or Mac. The position of the font(text) in Windows and Mac acts differently. Font -> Brasley (16px)
Baalamurgan's user avatar

1
2 3 4 5
31