Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design Web Typography Laying Out Type for the Web Typographic Hierarchy: Caps, Color, and Pairing Typefaces - Part 2

mohammed mayat
mohammed mayat
4,228 Points
Posted by mohammed mayat
mohammed mayat
4,228 Points

font typography - google font slow load

after adding font from google font the website would have a slow load, just anyone know way to get around this

4 Answers

mohammed mayat
mohammed mayat
4,228 Points
mohammed mayat
mohammed mayat
4,228 Points

<link href="https://fonts.googleapis.com/css?family=Alegreya+SC|Alegreya:400,400i,700,700i|Pathway+Gothic+One" rel="stylesheet">

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Ok Mohammed, fonts imported from Google Fonts can have a huge effect on load times, and you import a lot of them. Looking at Google Fonts, you actually get a sign telling you that load times might be slower using that many fonts. Try to use only the ones you really need.

I hope that helps :)

Jonas

Max Senden
Max Senden
23,177 Points
Max Senden
Max Senden
23,177 Points

Hi Mohammed,

Like Stjarnan said: using many webfonts can severly decrease the performance / loading-times of your website.

Try limiting your webfonts to 1 or 2, no more. For example, you don't per se need to have the italic version of the webfont. You can simply simulate it by using <i> or <italic> tags in the HTML. This is of course not the real italic versions of the webfont, but probably it will look just fine.