How to use Google Fonts
We have added below Google Fonts and they are ready to use:
Inter
Roboto
include fifthtry.github.io/inter package into FPM.ftd file
Add Dependency To
FPM.ftd
-- fpm.dependency: fifthtry.github.io/inter -- fpm.auto-import: fifthtry.github.io/inter as inter
Inside your .ftd file to change for any specific token use:
using font
-- fpm.type.headline-small.font: $inter.fonts.Inter -- ftd.text: role: $fpm.type.heading-small
How to create new fpm
font
packageFollow below instructions:
fpm
font
packageFollow below instructions:
How to use google-font-to-fpm packageWhile creating new fpm
font package you need to download
google-font-to-fpm.
Follow below steps to download
google-font-to-fpm.
- Goto link: google-font-to-fpm
- Clone google-font-to-fpm
repository into your local
- Check if python is installed Or install python.
- Once you installed
python3
on your machine, install requests
via using
below command on command prompt
While creating new fpm
font package you need to download
google-font-to-fpm.
Follow below steps to download google-font-to-fpm.
- Goto link: google-font-to-fpm
- Clone google-font-to-fpm repository into your local
- Check if python is installed Or install python.
- Once you installed
python3
on your machine, installrequests
via using below command on command prompt
python3 -m pip install requests
How to copy Google Font CSSFollow Below steps on https://fonts.google.com/specimen/Lato?query=lato
to download font CSS. Here we are going to use Lato
font.
- Goto lato page on Google Font
- Select all font stypes by clicking on
+ Select this style link
- Right sidebar you will see selected fonts - check if only
Lato
font styles are present
- Right sidebar bottom from the
Use on the web
section click on @import
radio
- Copy
Google Font
url e.g. Click here…
- Open it in new tab on the same browser window
- Copy all
CSS
styles by selecting all styles - ctrl+a
(windows) and ctrl+c
OR command+a
and command+c
(macOS)
- open
google-font-to-fpm
repository folder into SubLimeText editor
- open
font.txt
file
- paste Google Font CSS code into
font.txt
file
Follow Below steps on https://fonts.google.com/specimen/Lato?query=lato
to download font CSS. Here we are going to use Lato
font.
- Goto lato page on Google Font
- Select all font stypes by clicking on
+ Select this style link
- Right sidebar you will see selected fonts - check if only
Lato
font styles are present - Right sidebar bottom from the
Use on the web
section click on@import
radio - Copy
Google Font
url e.g. Click here… - Open it in new tab on the same browser window
- Copy all
CSS
styles by selecting all styles -ctrl+a
(windows) andctrl+c
ORcommand+a
andcommand+c
(macOS) - open
google-font-to-fpm
repository folder into SubLimeText editor - open
font.txt
file - paste Google Font CSS code into
font.txt
file
Create new fpm
font package on GitHub.com
Create new repository on your GitHub account, here we are creating package for
Lato
font so package name should be e.g. https://github.com/FifthTry/lato
(replace FifthTry
with your github account name).
- Once you create new repository named
lato
- Clone this newly created repository onto your local machine
- Goback to
SubLimeText
editor with google-font-to-fpm
repository
- open
read_google_font.py
file, search for package_name
- change the package name with your
lato
repository package name
fpm
font package on GitHub.com
Create new repository on your GitHub account, here we are creating package for
Lato
font so package name should be e.g. https://github.com/FifthTry/lato
(replace FifthTry
with your github account name).
- Once you create new repository named
lato
- Clone this newly created repository onto your local machine
- Goback to
SubLimeText
editor withgoogle-font-to-fpm
repository - open
read_google_font.py
file, search forpackage_name
- change the package name with your
lato
repository package name
package_name = "fifthtry.github.io/inter" name = "inter"
Change above lines with:
package_name = "fifthtry.github.io/lato" name = "lato"
Run
read_google_font.py
file on command promptpython3 read_google_font.py
- Open
google-font-to-fpm
repository intoSubLimeText
editor - Copy
FPM.ftd
file and paste it to your repository - Copy
static
folder and paste it to your repository - Run
fpm build
on your repository - Push repository code to
GitHub