Stack Overflow
Stack Overflow

Questions tagged [variable-fonts]

29 questions
0
votes
1 answer

Font-variation-settings Sliderbar only returning :normal

I am trying to make slider bars that will change the font-variation-settings of a variable font. I am trying to get these sliders to appear dynamically using PHP so that limits my options a tiny bit. I've edited the post to remove the PHP. I have…
Rob
  • 3
  • 4
0
votes
1 answer

Variable Font 40 times larger than 'static' fonts

I'm using three font weights of a 'normal' 'static' typeface. Each weight is 16KB. I've been reading how Variable Fonts are super fast to load because it is only one file. But the Variable Font version of the same typeface is 640KB. x40 the size of…
user2991837
  • 626
  • 1
  • 8
  • 17
0
votes
0 answers

Variable font italic axis render glitches on Safari

I have a variable font's Weight 'wght' and Italic 'ital' axis mapped to the X and Y mouse coordinates. Everything works smoothly on Chrome but on Safari the outermost corners get cut and create a glitch. enter image description here The same font…
Marc Zenhäusern
  • 1
0
votes
2 answers

Use variable font weight with inter in nextjs app

I just set up a nextjs app and want to use the variable Inter font, but I cant set the font weight. import Head from "next/head"; import "@/styles/globals.css"; import type { AppProps } from "next/app"; import { Inter } from…
Sventies
  • 2,314
  • 1
  • 28
  • 44
0
votes
0 answers

How to transition / interpolate smoothly between variable font weights when states change onscroll()

I'm looking to create some fun effects with variable fonts for a personal website. The goal is for them to be as smooth and seamless as possible. At first I was hoping to achieve that with css animations and hover effects, but it seems like you…
samseurynck
  • 113
  • 1
  • 10
0
votes
2 answers

Variable Google Fonts not Applying Valid CSS Properties

I am learning how to use variable Google fonts and wrote this HTML:

This heading should be condensed.

with the following CSS: @import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..200,100..700&display=swap'); h1 { …
Real Noob
  • 1,369
  • 2
  • 15
  • 29
0
votes
1 answer

Right way to embed variable google font Rubik

I'm tring to import Rubik's all variations but I've some issue. I would like to have all rubik's variation in the same url (italic and weight) and according with this google's article and this from css-triks I wrote my url using periods and this…
Tiziano Volpe
  • 15
  • 3
0
votes
1 answer

Reduce CSS layout and repaint for variable font animation

I'm trying variable font animation following this tutorial. However, I have noticed a heavy CPU overhead in this animation (especially in rendering): Comparing with a similar benchmark result but with transform animation: So if it's possible to…
stone-zeng
  • 261
  • 3
  • 11
0
votes
1 answer

Why is `opsz` doubled to `px` on Chromium and not on Webkit?

Variable fonts are supposed to have optical sizing proportionate to its px value automatically. But it's not consistent in different browsers. if font-size: 16px in Safari and Firefox – opsz: 16 in Chrome – opsz: 32 So I have to body { …
Taro Be
  • 7
  • 4
0
votes
2 answers

Roboto Flex variable font in greek

I'm searching Roboto Flex with greek characters https://github.com/TypeNetwork/Roboto-Flex Does anybody knows how to find more charsets?
Cookforweb
  • 85
  • 11
0
votes
2 answers

Controlling a variable font with mouse movement

I'm trying to use a variable font whose weight responds to mouse movement. I grabbed some code from a site where this is demonstrated but I can't get it to work. I've made a up a codepen for it. If anyone can spot what's going wrong I'd love to hear…
Jono
  • 53
  • 5
0
votes
1 answer

Italics in variable font support

I am having trouble switching from normal font style to italics with a web font. When I use font variation settings I only get the normal style : font-variation-settings: 'wght' 400, 'ital' 1; I am using a Google font called Petrona with…
kobayashi
  • 1
  • 1
0
votes
1 answer

Can I use the capabilities of a variable font with imagettftext()?

When using the gd2 library, I can load a variable font with imagettftext($image, 24, 0, 10, 100, $black, __DIR__.'/Some-VariableFont.ttf', 'Hello, World!'); But I can't figure out how to set properties such as weight or width. Is it possible? If…
SteeveDroz
  • 6,006
  • 6
  • 33
  • 65
0
votes
2 answers

Variable font from Google Fonts doesn't change weight

I'm trying to use variable fonts for the first time, namely Quicksand from Google fonts. Here are the tags it gives you...
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
1
2