CODEWITHSUNDEEP
htmlcssperformancefontscdn
Jim
Jim

Reputation: 47

What is better for using a custom font for my website?

I'm using a font called "DejaVu Sans" that does not exist in google fonts 

body{
    font-family:'DejaVu Sans' , tahoma;
}

I uploaded the font with different extensions to my website but it takes time to execute on the text on my website, I think it waits for the whole website to load first.

Is it better to upload the font files to a CDN or a files cloud and then use it on my website, or there is a better way?

Upvotes: 0

Views: 281

Answers (3)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

The font load time depends on the font file size. You can use font face kit provided by font-squirrel : https://www.fontsquirrel.com/fonts/dejavu-sans

To improve loading time you can wisely choose the required font formats to bind with your website font face.

To get more information about loading time you can refer below link, which will helps a lot. https://www.smashingmagazine.com/2011/03/the-font-face-rule-revisited-and-useful-tricks/

Upvotes: 1

Rahele Dadmand
Rahele Dadmand

Reputation: 573

you should use font face like this :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

then you can use the font wherever you want

Upvotes: 1

Andre Ramadhan
Andre Ramadhan

Reputation: 427

use @font-face instead.

Upload your .ttf files and convert them to .woff, .woof2 etc that is needed for font face.

Here is the link for standard @font-face example : @font-face

Use online converter here: webfont converter

Upvotes: 0

Related Questions