Use google fonts locally for various frontend development projects.
A good package to use in your electronJS and other native html/javascript projects.
- Place the fonts.css in your project's css directory.
cp css/fonts.css 'YOUR-PROJECT-CSS-FOLDER'- Make a folder webfonts in your Project's directory at the same place where you have the 'css' directory (Preferebly put all the static stuff in 'assets' directory).
cd 'YOUR-PROJECT-DIRECTORY'/assets
mkdir webfonts-
Download the required google font and the customisations, extract to folder and place them in webfonts directory. (Make sure to do 'extract to folder', simply extracting and copying wont work).
-
Include the fonts.css in your html file, above your custom stylesheet.
<html>
<head>
.
.
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/'YOUR-CUSTOM-CSS'.css">
.
.
</head>
<body>
.
.
</body>
</html>- In your custom css file use the google font as instructed on fonts.google.com, below are few examples.
.f9 {
font-family: 'Roboto';
}
.f10 {
font-family: 'Source Sans Pro'
}LOCAL GOOGLE FONTS
├── assets
│ ├── css
│ │ ├── fonts.css
| | ├── fonts.css
│ ├── webfonts
│ │ ├──FONT-FOLDER
| |________|── fonts-files.ttf
|
├── .gitignore
├── index.html
└── README.md- Abrial fatface
- Armata
- Hind
- Libre-Baskerville
- Lusitana
- Montserrat
- Nunito
- Open-Sans
- Roboto
- Source-Sans-Pro
- Maintain proper nomenclature and comment structure in fonts.css file.
- After adding the font correctly add another paragraph in the index.html file as shown below.
<p class="f'NUMBER-OF-FONT">Welcome to My Page : 'FONT-NAME'</p>- In style.css file set the paragraph to use the new font.
- Update the list of available fonts in readme.
- Feel free to add new google gonts to the project.
- Good starting point for newbies in open source.
- Accepting Hacktober fest PR's.
Copyright © 2019, Md Azmal. Released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent