Discover Top Posts Tagged with #font-face

Popular Recent

Stilts – Display Font Stilts is a whimsical typeface that is perfect for fun headlines. This all uppercase display face is available in two weights, bold and regular. We've also included a CSS file and the necessary font formats to add this font to your website using @font-face. Download Stilts - Display Font

#display #font #font-face #Fonts #fun #Fun Fonts #goofy #stilts #the warehouse #Typeface #web #Website Fonts #Whimsical Fonts

@font-face { font-family: 'Brain Flower'; src: url('https://static.tumblr.com/hi7kogu/O67pi00rq/brain_flower_euro-webfont.eot'); src: url('https://static.tumblr.com/hi7kogu/O67pi00rq/brain_flower_euro-webfont.eot?#iefix') format('embedded-opentype'), url('https://lh6.googleusercontent.com/proxy/X1TtqAsWLSD75N6Xx7fc4QTt45cz4QXcdKVUrnfEWHvzgSBOHlfizpgEMJDvIVcB7du-YmmnitDUfRUU_USJKkZyJSnQw3uGNNLXEI5rKA9FaiegBmu2yl-FOF4=s0-d') format('woff2'), url('https://static.tumblr.com/hi7kogu/2Bxpi00rt/brain_flower_euro-webfont.woff') format('woff'), url('https://static.tumblr.com/hi7kogu/dmrpi00rs/brain_flower_euro-webfont.ttf') format('truetype'), url('https://lh5.googleusercontent.com/proxy/UbRyCc1t2XknRob8kP5rwn6jUTIjbVaKloSgI7SurYZUsj0tBeXZu_JV38EGwFsZbkrovV5NNhZcMatKTGcoDP66djYi18hDlRLvOdcOC-WXExkjA4VhfR9KstVdvfDJRrqn64FHazTxGHm6SQ=s0-d') format('svg'); font-weight: normal; font-style: normal; }

Use in your CSS:

font-family: 'Brain Flower';

#writing #handwriting #font-face #fonts

@font-face { font-family: 'basic title font'; src: url('https://static.tumblr.com/hi7kogu/rPMpigbl9/basictitlefont-webfont.eot'); src: url('https://static.tumblr.com/hi7kogu/rPMpigbl9/basictitlefont-webfont.eot?#iefix') format('embedded-opentype'), url('https://static.tumblr.com/hi7kogu/vewpigblj/basictitlefont-webfont.woff2') format('woff2'), url('https://files.fm/u/udkydkft') format('woff'), url('https://static.tumblr.com/hi7kogu/P5tpigbln/basictitlefont-webfont.ttf') format('truetype'), url('https://static.tumblr.com/hi7kogu/KMmpigblr/basictitlefont-webfont.svg#web_symbolsregular') format('svg'); font-weight: normal; font-style: normal; }

Use in your CSS

font-family: 'basic title font';

#sans serif #basic #font-face #fonts

How to tell if your web font is loading?

How to ensure your fallback font is not replacing your primary typeface

Some engineers pride themselves on having a “designer’s eye.” They can spot if vertical alignment is off or if line-height isn’t set appropriately for the text size. Other times, we could use some help knowing for sure if a UI element is appearing as the designer call far.

One challenge is knowing if the web font you are calling with @font-face is indeed loading or not. Think you’ve got Helvetica displaying only to discover that the Arial fallback is showing up? Here’s how I ensure that the typeface I want is what is actually appearing.

Let’s say I want to use Open Sans from Google Fonts. The font stack Google suggests is:

font-family: 'Open Sans', sans-serif;

I put that in my styles, I hit save and looks pretty good. But if I take a closer look, it’s loading the sans-serif fallback and not Open Sans. How can I be sure of this when the generic family might be too close to the primary typeface for someone to easily identify? I plug in a more distinct generic family instead, preferably my favorite, fantasy.

font-family: 'Open Sans', fantasy;

Now on save, there’s definitely no mistaking that wonderful, magic that is definitely not Open Sans. It’s a quick way during development to identify our font-face is working as desired. You could also use a tool such as whatfont.

Be sure to set your font stack back to the desired fallback, unless some surprise Comic Sans or Papyrus is up your alley.

#webfont #web typography #typeface #css #font-face #Typography #fonts #web design #web development #web fonts #debugging #google fonts

Google Chrome Font-Face Rendering Problemi

Sayfalarımızda bilgisayarlarda yüklü olmayan yazı tiplerini kullanmak için eskiden Javascript ile çözüm bulabiliyorduk. Örneğin Cufon uygulaması buna örnekti. Onun öncesinde flash benzerinde bir takım uygulamalar kullanılıyordu. Son zamanlarda artık tamamı ile Font-Face kullanılmaya başlandı. Font-Face çevirici araçları arttı, Font-Face kullanımı oldukça yaygınlaştı ve her web sayfasında bu metod yerini aldı. Bunların yanında Google, Google Fonts adlı uygulamasını yayına aldı. Barındırdığı yazı tipleri ile, web geliştiricilere büyük bir kolaylık sağladı. Bu uygulama ile aldığımız js veya css çıktısını, sayfamıza ekleyerek font-face kullanmaya başladık.

Google Chrome Problemi

Dikkatinizi çekmiştir, bazı sayfalarda ve bazı zamanlarda Google Chrome fontları iyi derleyemiyor. Örneğin eskiden kullandığım Droid Sans, Open Sans gibi yazı tipleri, Chrome tarayıcısında hep pürüzlü görünüyordu. Başka bir bilgisayara geçtiğimde veya başka bir tarayıcıdan kontrol ettiğimde sorun görünmüyordu.

Örnekte görmüş olduğunuz üzere iki farklı tarayıcıda nasıl bir görünüm ortaya çıktığı ortada. Hatta renk farkı bile görünüyor gibi.

Google Chrome geliştirme sayfalarında bu sorunun Chrome’a ait olduğu söylensede ben diğer tarayıcılar da ve diğer bilgisayarlar da aynı sorunu yaşamıştım. Nasıl olduğunu bilmiyorum ama hep denk geldim bu soruna. O yüzden sorunun neden ve nasıl ortaya çıktığı konusunda pek bilgim yok.

Google Chrome için bu sorundan kurtulmanın yolu ise şöyle oluyormuş :

@font-face font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.eot'); src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), url('../../includes/fonts/chunk-webfont.woff') format('woff'), url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), url('../../includes/fonts/chunk-webfont.svg') format('svg'); font-weight: normal; font-style: normal; @media screen and (-webkit-min-device-pixel-ratio:0) @font-face font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.svg') format('svg');

Google Chrome Font-Face Rendering Problemi