Google Fonts (Regular Best Way)
To use Google Fonts is...
- navigate to fonts.google.com
- pick a font
- click get code
- copy the header code into the
<head> - apply the
classto the html attribute you want, and look at the url to match the name as a font-family.
Google Fonts Helper Webpage (Alternative, easier)
To use the non-official "Google Webfonts Helper" webpage for self-hosting Google Fonts, follow these steps:
- Visit the unofficial helper at
gwfh.mranftl.com - Search for the Google Font you want.
- Choose the character sets (Latin, Cyrillic, etc.) and select the font weights/styles you need (such as regular, bold, italic).
- After choosing your styles and browser support level, click “Download” to get a ZIP of the font files (WOFF2, WOFF, etc.).
- Extract and upload these font files to your web host or server, just as you would with other site assets (images, CSS, etc.).
- Copy the CSS generated by the tool (provided on the website after you select your fonts).
- Adjust the
url()paths in the@font-facestatements to match your file locations. - Paste this code in a CSS file that is loaded by your site.
- Use standard CSS to apply your font, e.g.:
body { font-family: 'Your Font Name', sans-serif; }
I think thats about it!