Questions tagged [webfonts]
Technology that enables people to use fonts on demand over the Web without requiring installation in the operating system.
1,546
questions
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 ...
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' ...
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&...
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 ...
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 @...
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 ...
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 ...
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 ...
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 ...
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-...
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:
...
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 ...
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 ...
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.
...
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>ᠠᠮᠪᡠᠯᠠ ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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: ["...
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
...
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 ...
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 ...
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 ...
-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)....
-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>
<...
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, ...
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 ...
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';
...
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', '...
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....
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 ...
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'; ...
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
| ...
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 ...
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 ...
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 ...
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 ...
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:...
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) ...
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 ...
-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 ...
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",
"...
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 ...
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)