# web typography > [!info]- ### using fonts on the web > - [complete guide to HTML fonts](https://kinsta.com/blog/html-fonts/) - wonderful breakdown of all the info you need > - [google fonts](https://fonts.google.com/ "opens in new tab") - embed fonts on your site > - [font squirrel](https://www.fontsquirrel.com/fonts/list/hot_web "opens in new tab") - web fonts you can self-host for your site > - [css typography settings](https://cssreference.io/typography/ "opens in new tab") - reference for all the css type variables > - [type scale](https://type-scale.com/ "opens in new tab") - build your typography system > - [typographic scale calculator](https://www.layoutgridcalculator.com/typographic-scale/ "opens in new tab") - build your typographic system > - [baseline.is type scale calculator](https://baseline.is/tools/type-scale-generator/) - another solid generator to build your typographic system ## system font stack declaration this is a good chunk of css code to set the font-family of your site to the operating system defaults: ``` body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; } ``` ## webfonts with google fonts you are normally limited by whatever fonts are installed on a user's computer. there's a very limited set of fonts that are probably available. that's not enough for us awesome designers. fortunately, [google hosts over 1600 font families](https://fonts.google.com) in tons of languages and styles for your use. their [support FAQ](https://developers.google.com/fonts/faq) helps explain how to get the fonts working in your code. --- tags: #web #resources #typography home: [[! intro to web resources]]