Streaming live at 10am (PST)

Web-kit Font Smoothing


#1

Has anyone used any antialiased font smoothing CSS in their sites?

Doesn't seem to be working for me,
and I want that baby soft smooth typeeeee

thanks!


#2

Hey @jwillk, are you looking to set something like this -webkit-font-smoothing: antialiased; for text?


#3

Exactly my man!

Ive added
.body {
-webkit-font-smoothing: antialiased!important;
}
to my custom code section but when I inspect my text using dev tools im not seeing anything being read

thanks again!


#4

Hey @jwillk, we're working on adding that to the UI, but in the meantime you can add it to the custom code section as you have. Except you need to specify a tag-based selector, like so:

body { ... } <-- Selects the entire document body and cascades the font setting to all elements on the page, which is what you want smiley

And not a class-based selector like you have in the above snippet:

.body { ... } <-- Selects all elements with the class 'body', which is probably not what you want wink

If you remove the period, can you see that change in the inspector? Let me know if it still doesn't show up.


Adding Webkit font smoothing to the UI
Adding Webkit font smoothing to the UI
#5

hey @callmevlad can you confirm how the code needs to be applied to the custom code section?

I've got body { -webkit-font-smoothing: antialiased; } posted in the head tag section, however the code just appears at the top of the page on the site. Obviously I'm doing something wrong. If you could help me out that'd be great.

Cheers


#6

Ah, sorry about that @grandtheftpixel, you'll need to wrap it in a <style> tag to indicate to the browser that it's CSS, like so:

<style>
  body { -webkit-font-smoothing: antialiased; }
</style>

Let me know if that works.


#7

Peeerrrfect. Thank you sir.


#8