Vertically Aligning a local font isn't working
Answered
Japanese jack mackerel posted this in #help-forum
Japanese jack mackerelOP
Hello, im using a local font CalSans-Semibold i downloaded the font and placed it in public/fonts am trying to align it vertically with tailwindcss but it doesn't seem to be working
24 Replies
@Japanese jack mackerel Hello, im using a local font CalSans-Semibold i downloaded the font and placed it in public/fonts am trying to align it vertically with tailwindcss but it doesn't seem to be working
This is a really common problem with me, Maybe try setting line height to none
leading-noneIf that doesn't work, I'd use use
-mb-1@"use php" If that doesn't work, I'd use use `-mb-1`
Japanese jack mackerelOP
can't use that it will affect the animation
-translate-y-[1px]
Japanese jack mackerelOP
Oh wait, can you send your code?
just the text
and its parent
have you used
flex justify-center items-center?Japanese jack mackerelOP
<h1 className="z-10 text-4xl text-transparent duration-1000 bg-white cursor-default text-edge-outline animate-title font-display sm:text-6xl md:text-9xl whitespace-nowrap bg-clip-text">
Bla bla bla bla
</h1>
Bla bla bla bla
</h1>
@"use php" have you used `flex justify-center items-center`?
Japanese jack mackerelOP
yea
@Japanese jack mackerel yea
Thats a issue with the font. Fix it here: https://transfonter.org/
@Japanese jack mackerel updates?
Japanese jack mackerelOP
seems to be working kinda but didn't go middle just went buttom instead
like this?
fix vertical metrics doesn't seem to allign it in middle ig i need to do it manually
thats an issue with the font only. even I face it
Japanese jack mackerelOP
i dun get fontforge or how can i achieve my goal with it 🥲
Japanese jack mackerelOP
fixed with fontlab8
Answer
Japanese jack mackerelOP
u just have to play with the Descender and Ascender values