From 023f5448e67dd98b8fb28db69a8ce252f77051ae Mon Sep 17 00:00:00 2001 From: Sidharth R Date: Sat, 26 Jun 2021 16:32:58 +0530 Subject: [PATCH 1/4] Add detailed instruction for using Google Fonts I felt the documentation was not clear about using Google fonts. Thus I added clear instructions about using Google fonts. Also I did other English improvements. I changed the heading from **Using custom css** to **Using custom font** since that is the appropriate heading. I had previously submitted a PR about this heading change only. You can ignore that PR if you are merging this. --- content/en/zzo/customization/customfont.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/en/zzo/customization/customfont.md b/content/en/zzo/customization/customfont.md index 85eefd8..2142656 100644 --- a/content/en/zzo/customization/customfont.md +++ b/content/en/zzo/customization/customfont.md @@ -24,7 +24,7 @@ enableToc: false - `"\"Source Sans Pro\", sans-serif"` - `"\"League Gothic\", sans-serif"` -## Using custom css +## Using custom font 1. Add custom css file @@ -34,11 +34,10 @@ enableToc: false ... ``` - `config/_default/params.toml` + + Set the above param in `config/_default/params.toml` and then add the file to assets/css/font.css - Set the above param and add file to assets/css/font.css - -2. In your font.css file, add font-face something like this. +2. In your font.css file, add the custom font-face in a format like this. ```css @font-face { @@ -58,7 +57,7 @@ enableToc: false } ``` -3. Add your fonts file at root/static/fonts/myfont.xxx (If your url in step2 is ('../fonts/myfont.xxx')). +3. Add your font files at `root/static/fonts/myfont.xxx` (assuming your url in step2 is ('../fonts/myfont.xxx')). In case your custom font is from Google Fonts you need not add the font files, instead you can just add the link tag in `root/layouts/partials/head/custom-head.html` (complete description is given below). 4. Make a font.toml file at root/data/font.toml and make variables as below. @@ -67,10 +66,11 @@ enableToc: false content_font = "\"Merriweather\", serif" ``` -## Import google font +## Using fonts from Google fonts (as custom font) +If the custom font that you wish to use is available on Google Fonts, then you need not provide the font files (as mentioned in the previous step). Instead you can add the link to the specific Googlefont by following the steps below. Make a file at `root/layouts/partials/head/custom-head.html` and then load font style. ```html -``` \ No newline at end of file +``` From 8b0d3b4ec14ed07eee541f718d038c27e7a1c7e0 Mon Sep 17 00:00:00 2001 From: Sidharth R Date: Sat, 26 Jun 2021 16:55:41 +0530 Subject: [PATCH 2/4] Add preconnect links & add detailed instructions The pre connect links are necessary --- content/en/zzo/customization/customfont.md | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/content/en/zzo/customization/customfont.md b/content/en/zzo/customization/customfont.md index 2142656..72425e0 100644 --- a/content/en/zzo/customization/customfont.md +++ b/content/en/zzo/customization/customfont.md @@ -8,14 +8,16 @@ enableToc: false ## Using embeded font -1. Make a file at `root/data/font.toml` +This theme already has the 6 different fonts. You can use any of these fonts. To do that: + +1. Make a file at `root/data/font.toml` with following params ```toml title_font = "\"Montserrat\", sans-serif" content_font = "\"muli\", sans-serif" ``` -2. We have 6 embeded font +2. Here is the list of 6 fonts that are avalable - `"\"Montserrat\", sans-serif"` - `"\"Merriweather\", serif"` @@ -26,7 +28,17 @@ enableToc: false ## Using custom font -1. Add custom css file +If you want to use any fonts which are not listed above, you can do so. There are 2 ways to do this. + +#### Method1 + +If you have the font files (e.g. .woff2 or .woff) follow the instructions in this section. + +#### Method2 + +If your custom font is from Google fonts, you can skip this section (adding font files) & follow the instructions in the next section to add link to your Google font. + +1. Add a custom css file first ```toml ... @@ -67,10 +79,13 @@ enableToc: false ``` ## Using fonts from Google fonts (as custom font) + If the custom font that you wish to use is available on Google Fonts, then you need not provide the font files (as mentioned in the previous step). Instead you can add the link to the specific Googlefont by following the steps below. Make a file at `root/layouts/partials/head/custom-head.html` and then load font style. ```html + + ``` From 3b936f43ad373fad329b44cb594c2670983df53a Mon Sep 17 00:00:00 2001 From: Sidharth R Date: Sat, 26 Jun 2021 16:56:06 +0530 Subject: [PATCH 3/4] Add space --- content/en/zzo/customization/customfont.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/en/zzo/customization/customfont.md b/content/en/zzo/customization/customfont.md index 72425e0..2661dfe 100644 --- a/content/en/zzo/customization/customfont.md +++ b/content/en/zzo/customization/customfont.md @@ -30,11 +30,11 @@ This theme already has the 6 different fonts. You can use any of these fonts. To If you want to use any fonts which are not listed above, you can do so. There are 2 ways to do this. -#### Method1 +#### Method 1 If you have the font files (e.g. .woff2 or .woff) follow the instructions in this section. -#### Method2 +#### Method 2 If your custom font is from Google fonts, you can skip this section (adding font files) & follow the instructions in the next section to add link to your Google font. From 80b6e78b964912343e43affcd60ead2f5e8a8838 Mon Sep 17 00:00:00 2001 From: Sidharth R Date: Sat, 26 Jun 2021 16:59:26 +0530 Subject: [PATCH 4/4] Add comment Added the following comment --- content/en/zzo/customization/customfont.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/en/zzo/customization/customfont.md b/content/en/zzo/customization/customfont.md index 2661dfe..d94b469 100644 --- a/content/en/zzo/customization/customfont.md +++ b/content/en/zzo/customization/customfont.md @@ -87,5 +87,6 @@ Make a file at `root/layouts/partials/head/custom-head.html` and then load font ```html + ```