Merge branch 'font_manager'
This commit is contained in:
commit
573ef5ac65
@ -220,7 +220,7 @@ Fictioneer customizes WordPress by using as many standard action and filter hook
|
||||
| `admin_enqueue_scripts` | `fictioneer_admin_scripts`, `fictioneer_admin_styles`, `fictioneer_disable_moderator_comment_edit`, `fictioneer_hide_private_data`
|
||||
| `admin_footer-post.php` | `fictioneer_classic_editor_js_restrictions`, `fictioneer_hide_permalink_with_js`
|
||||
| `admin_footer-post-new.php` | `fictioneer_classic_editor_js_restrictions`
|
||||
| `admin_head` | `fictioneer_remove_update_notice`, `fictioneer_hide_epub_inputs`, `fictioneer_hide_story_sticky_checkbox`
|
||||
| `admin_head` | `fictioneer_remove_update_notice`, `fictioneer_hide_epub_inputs`, `fictioneer_hide_story_sticky_checkbox`, `fictioneer_output_head_fonts`
|
||||
| `admin_head-post.php` | `fictioneer_hide_permalink_with_css`, `fictioneer_classic_editor_css_restrictions`
|
||||
| `admin_head-post-new.php` | `fictioneer_classic_editor_css_restrictions`
|
||||
| `admin_head-profile.php` | `fictioneer_remove_profile_blocks`
|
||||
@ -265,7 +265,7 @@ Fictioneer customizes WordPress by using as many standard action and filter hook
|
||||
| `wp_dashboard_setup` | `fictioneer_remove_dashboard_widgets`
|
||||
| `wp_default_scripts` | `fictioneer_remove_jquery_migrate`
|
||||
| `wp_enqueue_scripts` | `fictioneer_add_custom_scripts`, `fictioneer_customizer_queue`, `fictioneer_style_queue`
|
||||
| `wp_head` | `fictioneer_output_head_seo`, `fictioneer_output_rss`, `fictioneer_output_schemas`, `fictioneer_add_fiction_css`
|
||||
| `wp_head` | `fictioneer_output_head_seo`, `fictioneer_output_rss`, `fictioneer_output_schemas`, `fictioneer_add_fiction_css`, `fictioneer_output_head_fonts`
|
||||
| `wp_update_nav_menu` | `fictioneer_purge_nav_menu_transients`
|
||||
|
||||
<br>
|
||||
|
49
FAQ.md
49
FAQ.md
@ -1,88 +1,87 @@
|
||||
# Frequently Asked Questions
|
||||
|
||||
#### Q: How do I ... in WordPress?
|
||||
### Q: How do I ... in WordPress?
|
||||
|
||||
This FAQ is about the Fictioneer theme. If you have questions about the WordPress content management system, better visit the [official support site](https://wordpress.org/support/) or search the Internet for tutorials. There are literally thousands.
|
||||
|
||||
#### Q: How do I set up my own site?
|
||||
### Q: How do I set up my own site?
|
||||
|
||||
Assuming this is your first WordPress site, take a look at the [Installation](INSTALLATION.md) guide. If that proves insufficient, [search](https://www.google.com/search?q=wordpress+step+by+step+tutorial) the Internet for one of the many step-by-step tutorials or ask/hire someone. Just don’t take the first cheap host or offer you come across, do your own research.
|
||||
|
||||
#### Q: Does the theme support multiple authors?
|
||||
### Q: Does the theme support multiple authors?
|
||||
|
||||
Yes, you can use the theme for multiple authors. Just enable the option to "display authors on cards and posts" under **Fictioneer > General** and assign the author role as needed. Do not make everyone an administrator! Keep also in mind that huge visitor counts will require a more powerful server. The theme is intended for individuals and small collectives.
|
||||
|
||||
If you want to display multiple authors **per story or chapter,** you need to check the "Enable advanced meta fields" option under **Fictioneer > General > Compatibility.** This will display several extra inputs that most sites just do not need, hence they are hidden by default. Note that the co-authors field is a comma-separated list of IDs (i.e. positive numbers), not names.
|
||||
|
||||
#### Q: Can this be an archive for user contributed content?
|
||||
### Q: Can this be an archive for user contributed content?
|
||||
|
||||
Technically, yes. However, this is not recommended for several reasons. The theme lacks a frontend content submission system, which means you need to grant random people access to the admin panels. While the included role manager allows you to restrict a user’s capabilities, WordPress was never intended for unsafe authors. You will need to watch and moderate everyone, making this only viable for smaller communities with a trustworthy team.
|
||||
|
||||
WordPress is also not a performant choice to run community sites, requiring too many server resources. You will need a good host or your own hardware, plus caching and technical expertise. This is going to be a headache. But some people have already done it despite all warnings.
|
||||
|
||||
#### Q: Can I use special characters in names and titles?
|
||||
### Q: Can I use special characters in names and titles?
|
||||
|
||||
Probably, to an extend? The usual suspects have been tested to ensure Extended Latin is working, but you should not try to push it with zalgo text or worse. Some special characters are even actively filtered out to prevent certain attacks.
|
||||
|
||||
#### Q: Is this a block theme with full-site editing?
|
||||
### Q: Is this a block theme with full-site editing?
|
||||
|
||||
No. Fictioneer was developed as standalone solution and to work out of the box, looking good and offering the best reading experience achievable. Full-site editing is the polar opposite of that goal.
|
||||
|
||||
#### Q: Is the theme available in other languages?
|
||||
### Q: Is the theme available in other languages?
|
||||
|
||||
The theme is translation-ready but at the point of writing, only English is available. Feel free to [add your own translation](https://developer.wordpress.org/apis/internationalization/localization/) to the **languages** folder under the `fictioneer` text-domain or use a plugin. Be aware that there are JavaScript translations as well.
|
||||
|
||||
#### Q: Why is the ePUB download button not showing up?
|
||||
### Q: Why is the ePUB download button not showing up?
|
||||
|
||||
You probably forgot to add a preface, which is required and should contain a copyright notice. Because once something is on the Internet, it will stay on the Internet. Make sure everything is in order. Also possible is that you somehow disabled the ePUB on the story or forgot to enable the feature in the settings.
|
||||
|
||||
#### Q: Why does the ePUB download only return an empty file?
|
||||
### Q: Why does the ePUB download only return an empty file?
|
||||
|
||||
The ePUB converter is held together by rubber band and wishful thinking, with many points of failure. That is why the feature is marked as *experimental*. Likely causes include incompatible HTML in the content, CDNs that return exotic URLs, oversized images, not enough PHP memory or missing extensions (dom, zip), missing writing/reading permissions on the server, or caching (exclude `/download-epub`).
|
||||
|
||||
#### Q: What does the fingerprint icon on comments mean?
|
||||
### Q: What does the fingerprint icon on comments mean?
|
||||
|
||||
That is just an unique hash to distinguish commenters with the same nickname and assign the comment edit script if you are authenticated. There are always malicious actors on the Internet who may pose as others to cause strife. Guest commenters do not have a fingerprint since their submissions are inherently untrustworthy, although a [gravatar](https://gravatar.com/) can serve the same purpose.
|
||||
|
||||
#### Q: Are there notification emails for story updates?
|
||||
### Q: Are there notification emails for story updates?
|
||||
|
||||
There are not. Emails are highly problematic, even simple transactional emails about profile changes or new replies to your comments. They are expensive operations, unsafe, and have a good chance to be flagged as spam which can discredit your domain. You do not want to send emails in bulk unless you have a dedicated subscription service. Regardless, the theme does not offer this feature. Better rely on the mailers offered by your Ko-fi, Patreon, SubScribeStar, and so forth. They are better at this.
|
||||
|
||||
#### Q: Does the Patreon plugin work with the theme?
|
||||
### Q: Does the Patreon plugin work with the theme?
|
||||
|
||||
This has not been tested but most likely not.
|
||||
|
||||
#### Q: Does the Jetpack plugin work with the theme?
|
||||
### Q: Does the Jetpack plugin work with the theme?
|
||||
|
||||
Partially, depending on what features you want. Anything affecting the layout (aside from Gutenberg blocks) may cause issues and will probably fit poorly into the style without custom adjustments. The comment form is working but disables several theme features. The post subscription feature will not work for stories, chapters, and any other custom post types — only posts, which is by design. Analytics and dashboard features should be fine, though.
|
||||
|
||||
#### Q: What happened to Fictioneer version 1 to 4?
|
||||
### Q: What happened to Fictioneer version 1 to 4?
|
||||
|
||||
They were never released or distributed, version 5 is the first public one.
|
||||
|
||||
#### Q: Why do the OAuth links return a 404 error?
|
||||
### Q: Why do the OAuth links return a 404 error?
|
||||
|
||||
After activating the feature, you need to flush the permalinks. You can do this under **Settings > Permalinks** by just saving, you do not need to change anything.
|
||||
|
||||
#### Q: Can I use stories without chapters as oneshots?
|
||||
### Q: Can I use stories without chapters as oneshots?
|
||||
|
||||
Nobody can stop you from doing that, but it is wrong. Stories do not have the same capabilities as chapters and the theme does not understand the concept. There will be no formatting options, bookmarks, text-to-speech, suggestions, comments, and so forth. SEO data and API responses may also be messed up. If you can live with that, go ahead.
|
||||
|
||||
#### Q: Why do chapter permalinks not include the story?
|
||||
### Q: Why do chapter permalinks not include the story?
|
||||
|
||||
Because. And it is really difficult.
|
||||
|
||||
#### Q: Can I use the theme for Japanese, Korean, Chinese, and other logographic writing systems?
|
||||
### Q: Can I use the theme for Japanese, Korean, Chinese, and other writing systems?
|
||||
|
||||
Apparently, even though this was never considered during development. WordPress is multi-lingual by default and the theme can be translated, which can be done with certain plugins too. You can change the word count script to count characters instead, with an optional multiplier for approximation. You will most likely need to add a [custom font](https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#custom-fonts), though.
|
||||
|
||||
Resources:
|
||||
**Resources:**
|
||||
* Fictioneer > General > Chapters & Stories > Count characters instead of words
|
||||
* Fictioneer > General > Chapters & Stories > Multiply the displayed word counts with \[\_\_\_\]
|
||||
* Fictioneer > General > Chapters & Stories > Calculate reading time with \[\_\_\_\] words per minute
|
||||
* Example font: [Noto Sans Japanese](https://fonts.google.com/noto/specimen/Noto+Sans+JP)
|
||||
* Example font: [Noto Sans Korean](https://fonts.google.com/noto/specimen/Noto+Sans+KR)
|
||||
* Example font: [Noto Sans Traditional Chinese](https://fonts.google.com/noto/specimen/Noto+Sans+TC)
|
||||
* Example font: [Noto Sans Simplified Chinese](https://fonts.google.com/noto/specimen/Noto+Sans+SC)
|
||||
* Example font: [Noto Sans Thai](https://fonts.google.com/noto/specimen/Noto+Sans+Thai)
|
||||
* Example font: [Noto Sans Egyptian Hieroglyphs](https://fonts.google.com/noto/specimen/Noto+Sans+Egyptian+Hieroglyphs)
|
||||
* [Installation guide for custom fonts](https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#custom-fonts)
|
||||
* [Noto Sans JP](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-jp): Noto Sans variant for Japanese.
|
||||
* [Noto Sans KR](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-kr): Noto Sans variant for Korean.
|
||||
* [Noto Sans TC](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-tc): Noto Sans variant for Traditional Chinese.
|
||||
* [Noto Sans SC](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-sc): Noto Sans variant for Simplified Chinese.
|
||||
|
16
FILTERS.md
16
FILTERS.md
@ -410,6 +410,14 @@ Filters the return array of the `fictioneer_get_font_colors()` function, used to
|
||||
|
||||
---
|
||||
|
||||
### `apply_filters( 'fictioneer_filter_font_data', $fonts )`
|
||||
Filters the font array compiled from all valid font folders and Google Fonts links in both the parent and child theme. Note that the `fictioneer_get_font_data()` function reads the file system, which is potentially slow.
|
||||
|
||||
**Parameters:**
|
||||
* $fonts (array) – Array of font data.
|
||||
|
||||
---
|
||||
|
||||
### `apply_filters( 'fictioneer_filter_header_image', $header_image_url, $post_id )`
|
||||
Filters the URL of the header image in the `header.php` template.
|
||||
|
||||
@ -605,6 +613,14 @@ Filters the intermediate output array of the `fictioneer_get_post_meta_items()`
|
||||
|
||||
---
|
||||
|
||||
### `apply_filters( 'fictioneer_filter_pre_build_bundled_fonts', $fonts )`
|
||||
Filters the font array before the bundled-fonts.css stylesheet is built in the `fictioneer_build_bundled_fonts()` function. This allows you to add, remove, or change fonts at the last opportunity. Note that the function reads the file system, which is potentially slow. The result is cached in the `fictioneer_chapter_fonts` option.
|
||||
|
||||
**Parameters:**
|
||||
* $fonts (array) – Array of font data.
|
||||
|
||||
---
|
||||
|
||||
### `apply_filters( 'fictioneer_filter_recommendations_card_args', $card_args, $args )`
|
||||
Filters the arguments passed to the `partials/_card-recommendation` template part in the `fictioneer_recommendations_list( $args )` function, normally added via the `fictioneer_recommendations_after_content` hook.
|
||||
|
||||
|
175
INSTALLATION.md
175
INSTALLATION.md
@ -7,7 +7,7 @@ This guide is mainly written for people who never had their own WordPress site b
|
||||
* [Choosing a Host](#choosing-a-host)
|
||||
* [Installing WordPress](#installing-wordpress)
|
||||
* [Configuring WordPress](#configuring-wordpress)
|
||||
* [Securing WordPress](#securing-wordpress)
|
||||
* [Securing WordPress & Browser Caching](#securing-wordpress--browser-caching)
|
||||
* [Legal Considerations](#legal-considerations)
|
||||
* [How to Install/Update the Fictioneer Theme](#how-to-installupdate-the-fictioneer-theme)
|
||||
* [Updating the Theme](#updating-the-theme)
|
||||
@ -76,7 +76,7 @@ Everything installed? Head to **[Settings](https://wordpress.org/support/article
|
||||
|
||||
* **Author websites:** Technically not a required setting, but authors may want to fill out the website field in their profile. These are added as Open Graph author meta tags used by search engines and social media embeds. If left blank, the generated author page of the site will be used instead, which might be what you want anyway.
|
||||
|
||||
### Securing WordPress
|
||||
### Securing WordPress & Browser Caching
|
||||
|
||||
You can greatly improve your site security and performance by adding policies to the **.htaccess** file located in the WordPress root directory. Managed hosting plans normally do this for you. Make a backup and add the following lines anywhere before `# BEGIN WordPress` or after `# END WordPress`. If something goes wrong wrong, just remove everything again or restore the backup. You can also use a (cache) plugin. This is just the basics, far more is possible, but please refer to a proper guide.
|
||||
|
||||
@ -1181,118 +1181,91 @@ Fictioneer loads the free version of [Font Awesome 6.4.2](https://fontawesome.co
|
||||
|
||||
### Custom Fonts
|
||||
|
||||
You can add custom fonts with a child theme, which requires a series of not-quite-easy steps. This is less complicated with the Google Fonts CDN — however, that may be a privacy issue. Legally safe is to deliver the fonts from your server, as the theme does by default. Both options are explained here on the example of [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans?noto.query=noto+sans), either as extra or primary/secondary font. Noto has also variants for logographic writing systems if you require that. Mind that not all fonts you find on the Internet are free to use.
|
||||
You can add custom fonts, either by uploading a configuration folder to `/themes/your-child-theme/fonts/` or with a CDN like Google Fonts. The latter is far more convenient, though it also violates the GDPR and is therefore not recommended except for testing. Delivering fonts from your server is legally safe, but can affect performance if you do not [leverage browser caching](#securing-wordpress--browser-caching) or use a cache plugin (which you should).
|
||||
|
||||
#### 1A) Load from the Google Fonts CDN
|
||||
Following is an explanation of both methods on the example of [Noto Sans](https://fonts.google.com/noto/specimen/Noto+Sans?noto.query=noto+sans), which has also great variants for logographic writing systems if you require that. Mind that not all fonts you find on the Internet are free to use.
|
||||
|
||||
Scroll down to **Styles** and select what you need, typically everything from 300 to 700 if you plan to replace the primary font. On the right, under **Use on the web**, you will find two options to import the font. Either will work, but let’s go with **\[\<link\>\]** because it supports the preconnect feature.
|
||||
Purge the theme caches under **Fictioneer > Tools** after adding or removing a font. You may have to force-refresh too. Once everything is in order and refreshed, you can see the font listed under **Fictioneer > Fonts**. With that, you can assign the fonts to specific parts of the theme under **Appearance > Customize > Fonts**. More is possible with custom CSS.
|
||||
|
||||
Time to add some code to your **child theme’s functions.php**.
|
||||
#### 1A) Upload a font configuration folder
|
||||
|
||||
```php
|
||||
/**
|
||||
* Adds links to Google Fonts in the HTML <head>
|
||||
*/
|
||||
This method requires some preparation. Take a look at the [roboto-serif](https://github.com/Tetrakern/fictioneer/tree/main/fonts/roboto-serif) default font folder; you will find several .woff2 files, one .css file, and one .json file. You can replicate that with relative ease using the [Google Fonts Webhelper](https://gwfh.mranftl.com/fonts/noto-sans) and a text editor of your choice. Search for "Noto Sans", select the charsets and styles you need (typically 300-700), then change the folder prefix to `../fonts/noto-sans/`. Copy the provided CSS into a new font.css file, download and unpack the archive, put everything into a "noto-sans" folder. You can rename the files, remove the comments, and minify the CSS if you got the patience. Just make sure everything is still correct.
|
||||
|
||||
function child_add_google_fonts_to_head() {
|
||||
echo '<link rel="preconnect" href="https://fonts.googleapis.com">'; /* Only once! */
|
||||
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'; /* Only once! */
|
||||
echo '<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">'; /* You can have multiple fonts, but better bundle them into one. */
|
||||
The font.json file may seem a bit challenging, but is actually mostly informative. The only name-value pairs of importance right now are **skip**, **chapter**, **remove**, **key**, **name**, and **family**. You are encouraged to fill out the rest regardless, in case it becomes required in the future. Here is a pre-made one for Noto Sans:
|
||||
|
||||
<details>
|
||||
<summary>Explanations</summary><br>
|
||||
|
||||
| Key | Type | Explanation
|
||||
| :--- | :---: | :---
|
||||
| skip | boolean | Whether to skip the CSS bundling (if loaded by other means or a system font). Default `false`.
|
||||
| remove | boolean | Whether to remove the font instead of adding it. Default `false`.
|
||||
| chapter | boolean | Whether to make the font available in chapters. Default `false`.
|
||||
| version | string | Version number. Default empty.
|
||||
| key * | string | Unique identifier and key for the associative font array.
|
||||
| name * | string | Display name.
|
||||
| family * | string | CSS value for the font-family property (no extra quotes).
|
||||
| alt | string | Fallback font-family value stack, e.g. "Helvetica, Arial". Default empty.
|
||||
| type | string | Design type, such as "sans-serif", "serif", or "monospace". Default empty.
|
||||
| styles | string[] | Available font-styles. Default empty.
|
||||
| weights | integer[] | Available font-weights. Default empty.
|
||||
| charsets | string[] | Supported writing systems. Default empty.
|
||||
| formats | string[] | Formats of the font files, such as .woff2, .woff, .ttf, and more. Default empty.
|
||||
| about | string | Description of the font for the admin page. Default empty.
|
||||
| note | string | Special note about the font for the admin page. Default empty.
|
||||
| preview | string | Changes the example sentence displayed on the admin page. Default empty.
|
||||
| sources | object | Collection of sub-objects listing sources for the font. Default empty.
|
||||
\* Required key-value pairs.
|
||||
|
||||
</details><br>
|
||||
|
||||
```json
|
||||
{
|
||||
"skip": false,
|
||||
"remove": false,
|
||||
"chapter": true,
|
||||
"version": "35",
|
||||
"key": "noto-sans",
|
||||
"name": "Noto Sans",
|
||||
"family": "Noto Sans",
|
||||
"alt": "",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "devanagari", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts.",
|
||||
"note": "",
|
||||
"preview": "The quick brown fox jumps over the lazy dog.",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans?subsets=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action( 'wp_head', 'child_add_google_fonts_to_head' );
|
||||
```
|
||||
|
||||
#### 1B) Load from your server
|
||||
You can find a collection of pre-made font folders under [/repo/fonts/](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts). Currently available:
|
||||
|
||||
Go to the [Google Fonts Webhelper](https://gwfh.mranftl.com/fonts/noto-sans) to prepare the font files and styles. Select the charsets depending on your language requirements, then select the styles you need as with the **1A** approach. Before you copy the CSS (for modern browsers), you may want to customize the folder prefix. `../fonts/` assumes you place the files in `/themes/your-child-theme/fonts/`, but if you add more than one font, subfolders like `../fonts/noto-sans/` will make them easier to manage.
|
||||
* [Noto Sans](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans): The Noto Sans font from Google.
|
||||
* [Noto Sans JP](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-jp): Noto Sans variant for Japanese.
|
||||
* [Noto Sans KR](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-kr): Noto Sans variant for Korean.
|
||||
* [Noto Sans TC](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-tc): Noto Sans variant for Traditional Chinese.
|
||||
* [Noto Sans SC](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/noto-sans-sc): Noto Sans variant for Simplified Chinese.
|
||||
* [Special Elite](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/special-elite): Typewriter-like font good for headings or special sections.
|
||||
* [Verdana](https://github.com/Tetrakern/fictioneer/tree/main/repo/fonts/verdana): Web safe font and example for adding pre-installed device fonts.
|
||||
|
||||
Once done, download the files and upload them to the theme folder you specified. Copy the CSS from the helper site to `/themes/your-child-theme/css/child-fonts.css` (for example, you can change the name as long as you do it everywhere).
|
||||
#### 1B) Load from the Google Fonts CDN
|
||||
|
||||
Time to add some code to your **child theme’s functions.php**.
|
||||
Visit [Google Fonts](https://fonts.google.com/) and browse for a font you like. On the **Specimen** tab, scroll down to **Styles** and select what you need, typically everything from 300 to 700 if you want to cover all cases of the theme. If some styles are missing, you can still use the font — just perhaps not as primary one. On the right, under **Use on the web**, choose the **\<link\>** option and copy the link of the href attribute (nothing else). Make sure only one font is selected, because bundled font links are currently not understood by the theme.
|
||||
|
||||
```php
|
||||
/**
|
||||
* Enqueue stylesheet with font definitions
|
||||
*/
|
||||
|
||||
function child_enqueue_fonts() {
|
||||
wp_enqueue_style(
|
||||
'child-fonts',
|
||||
get_stylesheet_directory_uri() . '/css/child-fonts.css',
|
||||
array( 'fictioneer-application' ),
|
||||
'1.0.0' // The version of your child theme, used for cache busting.
|
||||
);
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'child_enqueue_fonts', 99 );
|
||||
|
||||
/**
|
||||
* Exclude stylesheets from Autoptimize (if installed)
|
||||
*
|
||||
* Note: Autoptimize (and maybe other CSS optimization plugins) will
|
||||
* break the stylesheet, making it necessary to exclude it.
|
||||
*
|
||||
* @param string $exclude List of current excludes.
|
||||
*
|
||||
* @return string The updated exclusion string.
|
||||
*/
|
||||
|
||||
function child_ao_exclude_fonts_css( $exclude ) {
|
||||
return $exclude . ', child-fonts.css';
|
||||
}
|
||||
add_filter( 'autoptimize_filter_css_exclude', 'child_ao_exclude_fonts_css', 10, 1 );
|
||||
```
|
||||
|
||||
#### 2) Apply to the fonts
|
||||
|
||||
With the font loaded, you need to actually apply it. The approach depends on whether you just want an extra font for the chapter formatting options or replace the site fonts (Open Sans). Only do one of them (unless you add several fonts).
|
||||
|
||||
Time to add even more code to your **child theme’s functions.php**.
|
||||
|
||||
```php
|
||||
/**
|
||||
* Add font to chapter formatting options
|
||||
*
|
||||
* @param array $fonts Currently registered fonts.
|
||||
*
|
||||
* @return array Updated fonts.
|
||||
*/
|
||||
|
||||
function fictioneer_child_add_custom_fonts( $fonts ) {
|
||||
$fonts[] = array(
|
||||
'css' => 'Noto Sans', // CSS font-family value
|
||||
'name' => 'Noto Sans', // Display name
|
||||
'alt' => 'Open Sans' // Fallback CSS font-family value (optional)
|
||||
);
|
||||
|
||||
/*
|
||||
|
||||
// Repeat this for more fonts.
|
||||
|
||||
$fonts[] = array(
|
||||
'css' => 'Other Font',
|
||||
'name' => 'Other Font',
|
||||
'alt' => 'Open Sans'
|
||||
);
|
||||
|
||||
*/
|
||||
|
||||
return $fonts;
|
||||
}
|
||||
add_filter( 'fictioneer_filter_fonts', 'fictioneer_child_add_custom_fonts' );
|
||||
|
||||
/* ===== OR IF YOU WANT TO REPLACE THE PRIMARY SITE FONT ===== */
|
||||
|
||||
define( 'FICTIONEER_PRIMARY_FONT_CSS', 'Noto Sans' ); // CSS font-family value
|
||||
define( 'FICTIONEER_PRIMARY_FONT_NAME', 'Noto Sans' ); // Display name
|
||||
```
|
||||
|
||||
Now the font is properly registered and can be used in chapters. However, if you want to replace the primary font for the whole site, you need a bit of additional CSS. You can put that into a stylesheet or in **Appearance > Customize > Additional CSS**. You can also apply fonts conditionally, as explained under [Dark/Light Mode & Media Queries](#darklight-mode--media-queries). You can find all font properties [here](https://github.com/Tetrakern/fictioneer/blob/main/src/scss/common/_properties.scss#L30), but be careful not to remove the fallback fonts.
|
||||
|
||||
```scss
|
||||
:root {
|
||||
--ff-base: 'Noto Sans', 'Open Sans', var(--ff-system); /* Default font stack */
|
||||
--ff-heading: 'Noto Sans', var(--ff-base); /* Font stack used for headings */
|
||||
}
|
||||
https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap
|
||||
```
|
||||
|
||||
### Constants
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
css/fonts-base.css
Normal file
1
css/fonts-base.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
|
||||
abbr, acronym, address, big, cite, code, del,
|
||||
@ -150,7 +149,6 @@ span.underline {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 80%;
|
||||
line-height: 1.3;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.toc {
|
||||
|
1
fonts/cormorant-garamond/font.css
Normal file
1
fonts/cormorant-garamond/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:normal;font-weight:300;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:italic;font-weight:300;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:normal;font-weight:400;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:italic;font-weight:400;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:normal;font-weight:500;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:italic;font-weight:500;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:normal;font-weight:600;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:italic;font-weight:600;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:normal;font-weight:700;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Cormorant Garamond";font-style:italic;font-weight:700;size-adjust:115%;src:url("../fonts/cormorant-garamond/cormorant-garamond-v16-700italic.woff2") format("woff2")}
|
26
fonts/cormorant-garamond/font.json
Normal file
26
fonts/cormorant-garamond/font.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "16",
|
||||
"key": "cormorant-garamond",
|
||||
"name": "Cormorant Garamond",
|
||||
"family": "Cormorant Garamond",
|
||||
"alt": "Garamond",
|
||||
"type": "serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Cormorant is a free display type family developed by Christian Thalmann. While this project was heavily inspired by Claude Garamont's immortal legacy, Christian did not use any specific font as a starting point or direct reference for the designs. Most glyphs were drawn from scratch; when he needed guidance on a specific character, he searched for the term Garamond and skimmed through the results for a general impression.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Cormorant+Garamond"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/cormorant-garamond?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
1
fonts/crimson-text/font.css
Normal file
1
fonts/crimson-text/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:"Crimson Text";font-style:normal;font-weight:400;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Crimson Text";font-style:italic;font-weight:400;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Crimson Text";font-style:normal;font-weight:600;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Crimson Text";font-style:italic;font-weight:600;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Crimson Text";font-style:normal;font-weight:700;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Crimson Text";font-style:italic;font-weight:700;size-adjust:115%;src:url("../fonts/crimson-text/crimson-text-v19-700italic.woff2") format("woff2")}
|
25
fonts/crimson-text/font.json
Normal file
25
fonts/crimson-text/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "19",
|
||||
"key": "crimson-text",
|
||||
"name": "Crimson Text",
|
||||
"family": "Crimson Text",
|
||||
"type": "serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [400, 600, 700],
|
||||
"charsets": ["latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Crimson Text is a font family for book production in the tradition of beautiful oldstyle typefaces. There are a lot of great free fonts around, but one kind is missing: those Garamond-inspired types with all the little niceties like oldstyle figures, small caps, fleurons, math characters and the like. In fact, a lot of time is spend developing free knock-offs of ugly \"standards\" like Times and Helvetica. Crimson Text is inspired by the fantastic work of people like Jan Tschichold, Robert Slimbach and Jonathan Hoefler. We hope that the free type community will one day be able to enjoy Crimson Text as a beautiful workhorse.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Crimson+Text"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/crimson-text?subsets=latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
0
fonts/georgia/font.css
Normal file
0
fonts/georgia/font.css
Normal file
21
fonts/georgia/font.json
Normal file
21
fonts/georgia/font.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"skip": true,
|
||||
"chapter": true,
|
||||
"version": "2.05",
|
||||
"key": "georgia",
|
||||
"name": "Georgia",
|
||||
"family": "Georgia",
|
||||
"type": "serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [400, 700],
|
||||
"charsets": ["cyrillic", "greek", "latin", "latin-ext"],
|
||||
"formats": ["ttf"],
|
||||
"about": "Although inspired by the need for - and providing - clarity at low resolutions on the screen, Georgia is a typeface resonant with typographic personality. Even at small sizes the face exudes a sense of friendliness; a feeling of intimacy many would argue has been eroded from Times New Roman through overuse. This is as much testament to the skill of the typeface's designer, Matthew Carter, as it is to any intrinsic quality of the face's design, since the small pixel spaces of the screen can be a harrowing canvas for any type designer. In Georgia, Carter has successfully managed to create a typeface family which combines high legibility with character and charm.",
|
||||
"note": "This is a web safe font and provided by the operating system.",
|
||||
"sources": {
|
||||
"microsoft": {
|
||||
"name": "Microsoft",
|
||||
"url": "https://learn.microsoft.com/en-us/typography/font-list/georgia"
|
||||
}
|
||||
}
|
||||
}
|
0
fonts/helvetica-neue/font.css
Normal file
0
fonts/helvetica-neue/font.css
Normal file
22
fonts/helvetica-neue/font.json
Normal file
22
fonts/helvetica-neue/font.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"skip": true,
|
||||
"chapter": true,
|
||||
"version": "",
|
||||
"key": "helvetica-neue",
|
||||
"name": "Helvetica Neue",
|
||||
"family": "Helvetica Neue",
|
||||
"alt": "Helvetica, Arial",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [100, 200, 300, 400, 500, 700, 900],
|
||||
"charsets": ["latin"],
|
||||
"formats": ["ttf"],
|
||||
"about": "Helvetica, also known by its original name Neue Haas Grotesk, is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger and Eduard Hoffmann. Helvetica Neue is a reworking of the typeface with a more structurally unified set of heights and widths. Other changes include improved legibility, heavier punctuation marks, and increased spacing in the numbers.",
|
||||
"note": "This is a font provided by the operating system and not always available.",
|
||||
"sources": {
|
||||
"wikipedia": {
|
||||
"name": "See Wikipedia",
|
||||
"url": "https://en.wikipedia.org/wiki/Helvetica"
|
||||
}
|
||||
}
|
||||
}
|
0
fonts/lato/font.css
Normal file
0
fonts/lato/font.css
Normal file
25
fonts/lato/font.json
Normal file
25
fonts/lato/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "24",
|
||||
"key": "lato",
|
||||
"name": "Lato",
|
||||
"family": "Lato",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 700],
|
||||
"charsets": ["latin", "latin-ext"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Lato is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic (“Lato” means “Summer” in Polish). In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Lato"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/lato?subsets=latin,latin-ext"
|
||||
}
|
||||
}
|
||||
}
|
1
fonts/open-dyslexic-3/font.css
Normal file
1
fonts/open-dyslexic-3/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Regular"),local("OpenDyslexic3-Regular"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Regular.ttf");font-weight:400;size-adjust:85%;ascent-override:120%;font-display:swap}@font-face{font-family:"OpenDyslexic";src:local("OpenDyslexic3 Bold"),local("OpenDyslexic3-Bold"),url("../fonts/open-dyslexic-3/OpenDyslexic3-Bold.ttf");font-weight:700;size-adjust:85%;ascent-override:120%;font-display:swap}
|
21
fonts/open-dyslexic-3/font.json
Normal file
21
fonts/open-dyslexic-3/font.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "3",
|
||||
"key": "open-dyslexic-3",
|
||||
"name": "Open Dyslexic",
|
||||
"family": "OpenDyslexic",
|
||||
"type": "serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [400, 700],
|
||||
"charsets": ["latin"],
|
||||
"formats": ["ttf"],
|
||||
"about": "OpenDyslexic is a typeface designed against some common symptoms of dyslexia. If you like the way you are able to read this page, and others, then this typeface is for you!",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"openDyslexic": {
|
||||
"name": "OpenDyslexic",
|
||||
"url": "https://opendyslexic.org"
|
||||
}
|
||||
}
|
||||
}
|
0
fonts/open-sans/font.css
Normal file
0
fonts/open-sans/font.css
Normal file
25
fonts/open-sans/font.json
Normal file
25
fonts/open-sans/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": true,
|
||||
"chapter": true,
|
||||
"version": "40",
|
||||
"key": "open-sans",
|
||||
"name": "Open Sans",
|
||||
"family": "Open Sans",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 325, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "greek", "greek-ext", "hebrew", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, which includes the standard ISO Latin 1, Latin CE, Greek and Cyrillic character sets. Open Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance. It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.",
|
||||
"note": "Custom version with 325 font weight. Not used by default.",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Open+Sans"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/open-sans?subsets=cyrillic,cyrillic-ext,greek,greek-ext,hebrew,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
1
fonts/roboto-mono/font.css
Normal file
1
fonts/roboto-mono/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:"Roboto Mono";font-style:normal;font-weight:300;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:italic;font-weight:300;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:normal;font-weight:400;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:italic;font-weight:400;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:normal;font-weight:500;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:italic;font-weight:500;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:normal;font-weight:600;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:italic;font-weight:600;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:normal;font-weight:700;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Mono";font-style:italic;font-weight:700;size-adjust:92%;src:url("../fonts/roboto-mono/roboto-mono-v23-700italic.woff2") format("woff2")}
|
25
fonts/roboto-mono/font.json
Normal file
25
fonts/roboto-mono/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "23",
|
||||
"key": "roboto-mono",
|
||||
"name": "Roboto Mono",
|
||||
"family": "Roboto Mono",
|
||||
"type": "monospace",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "greek", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Roboto Mono is a monospaced addition to the Roboto type family. Like the other members of the Roboto family, the fonts are optimized for readability on screens across a wide variety of devices and reading environments. While the monospaced version is related to its variable width cousin, it doesn’t hesitate to change forms to better fit the constraints of a monospaced environment.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Roboto+Mono"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/roboto-mono?subsets=cyrillic,cyrillic-ext,greek,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
1
fonts/roboto-serif/font.css
Normal file
1
fonts/roboto-serif/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:300;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:italic;font-weight:300;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:400;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:italic;font-weight:400;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:500;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:italic;font-weight:500;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:600;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:italic;font-weight:600;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:normal;font-weight:700;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Roboto Serif";font-style:italic;font-weight:700;size-adjust:95%;src:url("../fonts/roboto-serif/roboto-serif-v13-700italic.woff2") format("woff2")}
|
25
fonts/roboto-serif/font.json
Normal file
25
fonts/roboto-serif/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "13",
|
||||
"key": "roboto-serif",
|
||||
"name": "Roboto Serif",
|
||||
"family": "Roboto Serif",
|
||||
"type": "serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Roboto Serif is a variable typeface family designed to create a comfortable and frictionless reading experience. Minimal and highly functional, it is useful anywhere (even for app interfaces) due to the extensive set of weights and widths across a broad range of optical sizes. While it was carefully crafted to work well in digital media, across the full scope of sizes and resolutions we have today, it is just as comfortable to read and work in print media.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Roboto+Serif"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/roboto-serif?subsets=cyrillic,cyrillic-ext,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
@ -69,12 +69,12 @@ if ( ! defined( 'FICTIONEER_LOGOUT_ENDPOINT' ) ) {
|
||||
|
||||
// String: CSS name of the primary font
|
||||
if ( ! defined( 'FICTIONEER_PRIMARY_FONT_CSS' ) ) {
|
||||
define( 'FICTIONEER_PRIMARY_FONT_CSS', 'Open Sans' );
|
||||
define( 'FICTIONEER_PRIMARY_FONT_CSS', get_theme_mod( 'primary_font_family_value', 'Open Sans' ) );
|
||||
}
|
||||
|
||||
// String: Display name of the primary font
|
||||
if ( ! defined( 'FICTIONEER_PRIMARY_FONT_NAME' ) ) {
|
||||
define( 'FICTIONEER_PRIMARY_FONT_NAME', 'Open Sans' );
|
||||
define( 'FICTIONEER_PRIMARY_FONT_NAME', get_theme_mod( 'primary_font_family_value', 'Open Sans' ) );
|
||||
}
|
||||
|
||||
// String: TTS regex (used to split text into sentences)
|
||||
|
@ -48,7 +48,7 @@ if ( is_archive() || is_search() || is_404() ) {
|
||||
|
||||
<head>
|
||||
<?php
|
||||
// Includes charset, content type, viewport, fonts, etc...
|
||||
// Includes charset, content type, viewport, etc...
|
||||
fictioneer_output_head_meta();
|
||||
|
||||
// Prevent indexing if required
|
||||
|
@ -13,6 +13,7 @@
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @since 5.7.4 - Updated to use SQL queries.
|
||||
* @since 5.10.0 - Updated for font manager.
|
||||
*
|
||||
* @global wpdb $wpdb WordPress database object.
|
||||
*/
|
||||
@ -23,6 +24,13 @@ function fictioneer_theme_deactivation() {
|
||||
// Delete all theme Transients
|
||||
fictioneer_delete_transients_like( 'fictioneer_' );
|
||||
|
||||
// Delete cached files
|
||||
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
|
||||
|
||||
if ( file_exists( $bundled_fonts ) ) {
|
||||
unlink( $bundled_fonts );
|
||||
}
|
||||
|
||||
// Only continue if the user wants to delete all options/mods
|
||||
if ( get_option( 'fictioneer_delete_theme_options_on_deactivation', false ) ) {
|
||||
// Remove theme mods
|
||||
|
@ -2483,7 +2483,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
|
||||
'section' => 'layout',
|
||||
'label' => __( 'Header Style', 'fictioneer' ),
|
||||
'description' => __( 'Choose the style of your header. This may affect or disable other settings.', 'fictioneer' ),
|
||||
'choices' => array(
|
||||
'choices' => array(
|
||||
'default' => _x( 'Default', 'Customizer header style option.', 'fictioneer' ),
|
||||
'top' => _x( 'Top', 'Customizer header style option.', 'fictioneer' ),
|
||||
'split' => _x( 'Split', 'Customizer header style option.', 'fictioneer' ),
|
||||
@ -2563,7 +2563,7 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
|
||||
'section' => 'layout',
|
||||
'label' => __( 'Mobile Navigation Style', 'fictioneer' ),
|
||||
'description' => __( 'Choose the style of your mobile navigation.', 'fictioneer' ),
|
||||
'choices' => array(
|
||||
'choices' => array(
|
||||
'overflow' => _x( 'Overflow', 'Customizer mobile navigation style option.', 'fictioneer' ),
|
||||
'collapse' => _x( 'Collapse', 'Customizer mobile navigation style option.', 'fictioneer' )
|
||||
),
|
||||
@ -2588,38 +2588,13 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
|
||||
'section' => 'layout',
|
||||
'label' => __( 'Mobile Menu Style', 'fictioneer' ),
|
||||
'description' => __( 'Choose the style of your mobile menu.', 'fictioneer' ),
|
||||
'choices' => array(
|
||||
'choices' => array(
|
||||
'minimize_to_right' => _x( 'Minimize site to right', 'Customizer mobile menu style option.', 'fictioneer' ),
|
||||
'left_slide_in' => _x( 'Slide in from left', 'Customizer mobile menu style option.', 'fictioneer' )
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// Dark mode font weight adjustment
|
||||
$manager->add_setting(
|
||||
'dark_mode_font_weight',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'adjusted'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'dark_mode_font_weight',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'layout',
|
||||
'label' => __( 'Dark Mode Font Weight', 'fictioneer' ),
|
||||
'description' => __( 'Fonts are rendered thinner in dark mode to offset text bleeding; you can turn that off.', 'fictioneer' ),
|
||||
'choices' => array(
|
||||
'adjusted' => _x( 'Adjusted', 'Customizer dark mode font weight option.', 'fictioneer' ),
|
||||
'normal' => _x( 'Normal', 'Customizer dark mode font weight option.', 'fictioneer' )
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// Custom layout toggle
|
||||
$manager->add_setting(
|
||||
'use_custom_layout',
|
||||
@ -2848,6 +2823,302 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add fonts customizer settings
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param WP_Customize_Manager $manager The customizer instance.
|
||||
*/
|
||||
|
||||
function fictioneer_add_fonts_customizer_settings( $manager ) {
|
||||
// Setup
|
||||
$fonts = fictioneer_get_font_data();
|
||||
$font_options = array( 'system' => __( 'System Font', 'fictioneer' ) );
|
||||
|
||||
foreach ( $fonts as $font ) {
|
||||
$font_options[ $font['family'] ] = $font['name'];
|
||||
}
|
||||
|
||||
$font_sub_options = array_merge( array( 'default' => __( 'Default', 'fictioneer' ) ), $font_options );
|
||||
|
||||
// Add layout section
|
||||
$manager->add_section(
|
||||
'fictioneer_fonts',
|
||||
array(
|
||||
'title' => __( 'Fonts', 'fictioneer' ),
|
||||
'priority' => '81'
|
||||
)
|
||||
);
|
||||
|
||||
// Primary font
|
||||
$manager->add_setting(
|
||||
'primary_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'Open Sans'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'primary_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Primary Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for most of the content and as default chapter font. Default "Open Sans".', 'fictioneer' ),
|
||||
'choices' => $font_options
|
||||
)
|
||||
);
|
||||
|
||||
// Secondary font
|
||||
$manager->add_setting(
|
||||
'secondary_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'Lato'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'secondary_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Secondary Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for small cards, tags, alongside icons, and in meta rows. Default "Lato".', 'fictioneer' ),
|
||||
'choices' => $font_options
|
||||
)
|
||||
);
|
||||
|
||||
// Heading font
|
||||
$manager->add_setting(
|
||||
'heading_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'Open Sans'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'heading_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Heading Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the site title plus articles, chapters, and cards. Default "Open Sans".', 'fictioneer' ),
|
||||
'choices' => $font_options
|
||||
)
|
||||
);
|
||||
|
||||
// Site title font
|
||||
$manager->add_setting(
|
||||
'site_title_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'site_title_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Site Title Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the site title and tagline. Defaults to heading font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Navigation item font
|
||||
$manager->add_setting(
|
||||
'nav_item_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'nav_item_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Navigation Item Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the items in the navigation bar. Defaults to primary font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Story title font
|
||||
$manager->add_setting(
|
||||
'story_title_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'story_title_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Story Title Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the title on story pages. Defaults to heading font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Chapter title font
|
||||
$manager->add_setting(
|
||||
'chapter_title_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'chapter_title_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Chapter Title Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the title on chapter pages. Defaults to heading font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Chapter list title font
|
||||
$manager->add_setting(
|
||||
'chapter_list_title_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'chapter_list_title_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Chapter List Title Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the title row in chapter lists. Defaults to primary font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Card title font
|
||||
$manager->add_setting(
|
||||
'card_title_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'card_title_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Card Title Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the card titles. Defaults to heading font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Card body font
|
||||
$manager->add_setting(
|
||||
'card_body_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'card_body_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Card Body Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the card content. Defaults to secondary font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Card list link font
|
||||
$manager->add_setting(
|
||||
'card_list_link_font_family_value',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'default'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'card_list_link_font_family_value',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Card List Link Font', 'fictioneer' ),
|
||||
'description' => __( 'Used for the links in card lists. Defaults to secondary font.', 'fictioneer' ),
|
||||
'choices' => $font_sub_options
|
||||
)
|
||||
);
|
||||
|
||||
// Dark mode font weight adjustment
|
||||
$manager->add_setting(
|
||||
'dark_mode_font_weight',
|
||||
array(
|
||||
'capability' => 'manage_options',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
'default' => 'adjusted'
|
||||
)
|
||||
);
|
||||
|
||||
$manager->add_control(
|
||||
'dark_mode_font_weight',
|
||||
array(
|
||||
'type' => 'select',
|
||||
'priority' => 10,
|
||||
'section' => 'fictioneer_fonts',
|
||||
'label' => __( 'Dark Mode Font Weight', 'fictioneer' ),
|
||||
'description' => __( 'Fonts are rendered thinner in dark mode to offset text bleeding; you can turn that off.', 'fictioneer' ),
|
||||
'choices' => array(
|
||||
'adjusted' => _x( 'Adjusted', 'Customizer dark mode font weight option.', 'fictioneer' ),
|
||||
'normal' => _x( 'Normal', 'Customizer dark mode font weight option.', 'fictioneer' )
|
||||
),
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// CUSTOMIZER SETTINGS
|
||||
// =============================================================================
|
||||
@ -2875,6 +3146,9 @@ function fictioneer_add_customizers( $manager ) {
|
||||
// Layout
|
||||
fictioneer_add_layout_customizer_settings( $manager );
|
||||
|
||||
// Fonts
|
||||
fictioneer_add_fonts_customizer_settings( $manager );
|
||||
|
||||
// Open Graph image
|
||||
$manager->add_setting(
|
||||
'og_image',
|
||||
|
@ -271,9 +271,17 @@ if ( ! function_exists( 'fictioneer_hsl_font_code' ) ) {
|
||||
*/
|
||||
|
||||
function fictioneer_watch_for_customer_updates() {
|
||||
// Transient caches
|
||||
delete_transient( 'fictioneer_customized_light_mode' );
|
||||
delete_transient( 'fictioneer_customized_dark_mode' );
|
||||
delete_transient( 'fictioneer_customized_layout' );
|
||||
|
||||
// Files
|
||||
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
|
||||
|
||||
if ( file_exists( $bundled_fonts ) ) {
|
||||
unlink( $bundled_fonts );
|
||||
}
|
||||
}
|
||||
add_action( 'customize_save_after', 'fictioneer_watch_for_customer_updates' );
|
||||
|
||||
@ -476,6 +484,36 @@ if ( ! function_exists( 'fictioneer_add_customized_dark_mode_css' ) ) {
|
||||
// ADD CUSTOMIZER LAYOUT CSS
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Helper that returns a font family value
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param string $option Name of the theme mod.
|
||||
* @param string $font_default Fallback font.
|
||||
* @param string $mod_default Default for get_theme_mod().
|
||||
*
|
||||
* @return string Ready to use font family value.
|
||||
*/
|
||||
|
||||
function fictioneer_get_custom_font( $option, $font_default, $mod_default ) {
|
||||
$selection = get_theme_mod( $option, $mod_default );
|
||||
$family = $font_default;
|
||||
|
||||
switch ( $selection ) {
|
||||
case 'system':
|
||||
$family = 'var(--ff-system)';
|
||||
break;
|
||||
case 'default':
|
||||
$family = $font_default;
|
||||
break;
|
||||
default:
|
||||
$family = "'{$selection}', {$font_default}";
|
||||
}
|
||||
|
||||
return $family;
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
|
||||
/**
|
||||
* Add customized layout CSS
|
||||
@ -516,6 +554,18 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
|
||||
$small_border_radius = (int) get_theme_mod( 'small_border_radius', 2 );
|
||||
$card_grid_column_min = (int) get_theme_mod( 'card_grid_column_min', 308 );
|
||||
|
||||
$font_primary = fictioneer_get_custom_font( 'primary_font_family_value', 'var(--ff-system)', 'Open Sans' );
|
||||
$font_secondary = fictioneer_get_custom_font( 'secondary_font_family_value', 'var(--ff-base)', 'Lato' );
|
||||
$font_heading = fictioneer_get_custom_font( 'heading_font_family_value', 'var(--ff-base)', 'Open Sans' );
|
||||
$font_site_title = fictioneer_get_custom_font( 'site_title_font_family_value', 'var(--ff-heading)', 'Open Sans' );
|
||||
$font_nav_item = fictioneer_get_custom_font( 'nav_item_font_family_value', 'var(--ff-base)', 'Open Sans' );
|
||||
$font_story_title = fictioneer_get_custom_font( 'story_title_font_family_value', 'var(--ff-heading)', 'Open Sans' );
|
||||
$font_chapter_title = fictioneer_get_custom_font( 'chapter_title_font_family_value', 'var(--ff-heading)', 'Open Sans' );
|
||||
$font_chapter_list_title = fictioneer_get_custom_font( 'chapter_list_title_font_family_value', 'var(--ff-base)', 'Open Sans' );
|
||||
$font_card_title = fictioneer_get_custom_font( 'card_title_font_family_value', 'var(--ff-heading)', 'Open Sans' );
|
||||
$font_card_body = fictioneer_get_custom_font( 'card_body_font_family_value', 'var(--ff-note)', 'Lato' );
|
||||
$font_card_list_link = fictioneer_get_custom_font( 'card_list_link_font_family_value', 'var(--ff-note)', 'Lato' );
|
||||
|
||||
// Build CSS
|
||||
$layout_css = ":root {
|
||||
--site-width: " . $site_width . "px;
|
||||
@ -528,6 +578,17 @@ if ( ! function_exists( 'fictioneer_add_customized_layout_css' ) ) {
|
||||
--site-title-font-size: " . fictioneer_get_css_clamp( $title_min, $title_max, 320, $site_width ) . ";
|
||||
--site-title-tagline-font-size: " . fictioneer_get_css_clamp( $tagline_min, $tagline_max, 320, $site_width ) . ";
|
||||
--grid-columns-min: " . $card_grid_column_min . "px;
|
||||
--ff-base: {$font_primary};
|
||||
--ff-note: {$font_secondary};
|
||||
--ff-heading: {$font_heading};
|
||||
--ff-site-title: {$font_site_title};
|
||||
--ff-story-title: {$font_story_title};
|
||||
--ff-chapter-title: {$font_chapter_title};
|
||||
--ff-chapter-list-title: {$font_chapter_list_title};
|
||||
--ff-card-title: {$font_card_title};
|
||||
--ff-card-body: {$font_card_body};
|
||||
--ff-card-list-link: {$font_card_list_link};
|
||||
--ff-nav-item: {$font_nav_item};
|
||||
}";
|
||||
|
||||
if ( get_theme_mod( 'use_custom_layout', false ) ) {
|
||||
|
@ -1008,7 +1008,7 @@ add_filter( 'autoptimize_filter_js_replacetag', 'fictioneer_replace_ao_insert_po
|
||||
*/
|
||||
|
||||
function fictioneer_ao_exclude_css( $exclude ) {
|
||||
return $exclude . ', fonts.css';
|
||||
return $exclude . ', fonts-base.css, fonts-full.css, bundled-fonts.css';
|
||||
}
|
||||
add_filter( 'autoptimize_filter_css_exclude', 'fictioneer_ao_exclude_css', 10, 1 );
|
||||
|
||||
@ -1016,9 +1016,9 @@ add_filter( 'autoptimize_filter_css_exclude', 'fictioneer_ao_exclude_css', 10, 1
|
||||
// OUTPUT HEAD FONTS
|
||||
// =============================================================================
|
||||
|
||||
if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
|
||||
if ( ! function_exists( 'fictioneer_output_critical_fonts' ) ) {
|
||||
/**
|
||||
* Output fonts in <head>
|
||||
* Output critical path fonts in <head>
|
||||
*
|
||||
* Critical fonts that need to be loaded as fast as possible and are
|
||||
* therefore inlined in the <head>.
|
||||
@ -1026,10 +1026,16 @@ if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
|
||||
* @since 5.0.0
|
||||
*/
|
||||
|
||||
function fictioneer_output_head_fonts() {
|
||||
function fictioneer_output_critical_fonts() {
|
||||
// Setup
|
||||
$primary_font = get_theme_mod( 'primary_font_family_value', 'Open Sans' );
|
||||
$uri = get_template_directory_uri() . '/fonts/';
|
||||
|
||||
// Currently, only Open Sans is supported
|
||||
if ( $primary_font !== 'Open Sans' ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<style id="inline-fonts" type="text/css">@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:300;src:local("OpenSans-Light"),url("<?php echo $uri; ?>open-sans/open-sans-v40-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:300;src:local("OpenSans-LightItalic"),url("<?php echo $uri; ?>open-sans/open-sans-v40-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:400;src:local("OpenSans-Regular"),url("<?php echo $uri; ?>open-sans/open-sans-v40-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:400;src:local("OpenSans-Italic"),url("<?php echo $uri; ?>open-sans/open-sans-v40-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:500;src:local("OpenSans-Medium"),url("<?php echo $uri; ?>open-sans/open-sans-v40-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:500;src:local("OpenSans-MediumItalic"),url("<?php echo $uri; ?>open-sans/open-sans-v40-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:600;src:local("OpenSans-SemiBold"),url("<?php echo $uri; ?>open-sans/open-sans-v40-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:600;src:local("OpenSans-SemiBoldItalic"),url("<?php echo $uri; ?>open-sans/open-sans-v40-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:700;src:local("OpenSans-Bold"),url("<?php echo $uri; ?>open-sans/open-sans-v40-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:700;src:local("OpenSans-BoldItalic"),url("<?php echo $uri; ?>open-sans/open-sans-v40-700italic.woff2") format("woff2")}</style>
|
||||
<?php // <--- End HTML
|
||||
@ -1045,12 +1051,10 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
|
||||
* Output HTML <head> meta
|
||||
*
|
||||
* @since 5.0.0
|
||||
* @since 5.10.0 - Split up for font manager.
|
||||
*/
|
||||
|
||||
function fictioneer_output_head_meta() {
|
||||
// Setup
|
||||
$font_link = get_template_directory_uri() . '/css/fonts.css?ver=' . FICTIONEER_VERSION;
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<meta charset="<?php echo get_bloginfo( 'charset' ); ?>">
|
||||
<meta http-equiv="content-type" content="text/html">
|
||||
@ -1059,13 +1063,73 @@ if ( ! function_exists( 'fictioneer_output_head_meta' ) ) {
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="theme-color" content="<?php echo '#' . get_background_color(); ?>">
|
||||
<meta name="referrer" content="strict-origin-when-cross-origin">
|
||||
<?php fictioneer_output_head_fonts(); ?>
|
||||
<link rel="stylesheet" href="<?php echo $font_link; ?>" media="print" onload="this.media='all'; this.onload = null;">
|
||||
<noscript><link rel="stylesheet" href="<?php echo $font_link; ?>"></noscript>
|
||||
<?php // <--- End HTML
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// OUTPUT HEAD FONTS
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Output font stylesheets <head> meta
|
||||
*
|
||||
* @since 5.10.0
|
||||
*/
|
||||
|
||||
function fictioneer_output_head_fonts() {
|
||||
// Critical path fonts
|
||||
fictioneer_output_critical_fonts();
|
||||
|
||||
// Bundled fonts
|
||||
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
|
||||
|
||||
// Create file if it does not exist
|
||||
if ( ! file_exists( $bundled_fonts ) ) {
|
||||
fictioneer_build_bundled_fonts();
|
||||
}
|
||||
|
||||
// Output font stylesheets...
|
||||
if ( file_exists( $bundled_fonts ) ) {
|
||||
// ... base and custom
|
||||
$base_fonts_href = get_template_directory_uri() . '/css/fonts-base.css?ver=' . FICTIONEER_VERSION;
|
||||
$custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css?ver=' . FICTIONEER_VERSION;
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<link rel="stylesheet" id="base-fonts-stylesheet" href="<?php echo $base_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
|
||||
<noscript><link rel="stylesheet" href="<?php echo $base_fonts_href; ?>"></noscript>
|
||||
<link rel="stylesheet" id="bundled-fonts-stylesheet" href="<?php echo $custom_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
|
||||
<noscript><link rel="stylesheet" href="<?php echo $custom_fonts_href; ?>"></noscript>
|
||||
<?php // <--- End HTML
|
||||
} else {
|
||||
// ... all theme fonts if something goes wrong
|
||||
$full_fonts_href = get_template_directory_uri() . '/css/fonts-full.css?ver=' . FICTIONEER_VERSION;
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<link rel="stylesheet" href="<?php echo $full_fonts_href; ?>" media="print" onload="this.media='all'; this.onload = null;">
|
||||
<noscript><link rel="stylesheet" href="<?php echo $full_fonts_href; ?>"></noscript>
|
||||
<?php // <--- End HTML
|
||||
}
|
||||
|
||||
// Output Google Fonts links (if any)
|
||||
$google_fonts_links = get_option( 'fictioneer_google_fonts_links' );
|
||||
|
||||
if ( ! empty( $google_fonts_links ) ) {
|
||||
$google_fonts_links = explode( "\n", $google_fonts_links );
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<?php // <--- End HTML
|
||||
|
||||
foreach ( $google_fonts_links as $link ) {
|
||||
printf( '<link href="%s" rel="stylesheet">', $link );
|
||||
}
|
||||
}
|
||||
}
|
||||
add_action( 'wp_head', 'fictioneer_output_head_fonts', 5 );
|
||||
add_action( 'admin_head', 'fictioneer_output_head_fonts', 5 );
|
||||
|
||||
// =============================================================================
|
||||
// MODIFY ROBOTS META
|
||||
// =============================================================================
|
||||
|
@ -1960,44 +1960,66 @@ if ( ! function_exists( 'fictioneer_get_fonts' ) ) {
|
||||
* Returns array of font items
|
||||
*
|
||||
* @since 5.1.1
|
||||
* @since 5.10.0 - Refactor for font manager.
|
||||
*
|
||||
* @return array Font items (css, name, and alt).
|
||||
*/
|
||||
|
||||
function fictioneer_get_fonts() {
|
||||
// Make sure 'Open Sans' is always in first or second place
|
||||
if ( FICTIONEER_PRIMARY_FONT_CSS !== 'Open Sans' ) {
|
||||
$fonts = array(
|
||||
['css' => FICTIONEER_PRIMARY_FONT_CSS, 'name' => FICTIONEER_PRIMARY_FONT_NAME],
|
||||
['css' => 'Open Sans', 'name' => _x( 'Open Sans', 'Font name.', 'fictioneer' )]
|
||||
);
|
||||
} else {
|
||||
$fonts = array(
|
||||
['css' => FICTIONEER_PRIMARY_FONT_CSS, 'name' => FICTIONEER_PRIMARY_FONT_NAME]
|
||||
);
|
||||
// Make sure fonts are set up!
|
||||
if (
|
||||
! get_option( 'fictioneer_chapter_fonts' ) ||
|
||||
! is_array( get_option( 'fictioneer_chapter_fonts' ) )
|
||||
) {
|
||||
fictioneer_build_bundled_fonts();
|
||||
}
|
||||
|
||||
// Setup default fonts
|
||||
$fonts = array_merge(
|
||||
$fonts,
|
||||
array(
|
||||
['css' => '', 'name' => _x( 'System Font', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'Lato', 'name' => _x( 'Lato', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'Helvetica Neue', 'name' => _x( 'Helvetica Neue', 'Font name.', 'fictioneer' ), 'alt' => 'Arial'],
|
||||
['css' => 'Georgia', 'name' => _x( 'Georgia', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'Roboto Mono', 'name' => _x( 'Roboto Mono', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'Roboto Serif', 'name' => _x( 'Roboto Serif', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'Cormorant Garamond', 'name' => _x( 'Cormorant Garamond', 'Font name.', 'fictioneer' ), 'alt' => 'Garamond'],
|
||||
['css' => 'Crimson Text', 'name' => _x( 'Crimson Text', 'Font name.', 'fictioneer' )],
|
||||
['css' => 'OpenDyslexic', 'name' => _x( 'Open Dyslexic', 'Font name.', 'fictioneer' )]
|
||||
)
|
||||
// Setup
|
||||
$custom_fonts = get_option( 'fictioneer_chapter_fonts' );
|
||||
$fonts = array(
|
||||
array( 'css' => fictioneer_font_family_value( FICTIONEER_PRIMARY_FONT_CSS ), 'name' => FICTIONEER_PRIMARY_FONT_NAME ),
|
||||
array( 'css' => '', 'name' => _x( 'System Font', 'Font name.', 'fictioneer' ) )
|
||||
);
|
||||
|
||||
// Build final font array
|
||||
foreach ( $custom_fonts as $custom_font ) {
|
||||
if (
|
||||
! in_array( $custom_font, $fonts ) &&
|
||||
$custom_font['name'] !== FICTIONEER_PRIMARY_FONT_NAME &&
|
||||
$custom_font['css'] !== FICTIONEER_PRIMARY_FONT_CSS
|
||||
) {
|
||||
$fonts[] = $custom_font;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply filters and return
|
||||
return apply_filters( 'fictioneer_filter_fonts', $fonts );
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// WRAP MULTI-WORD FONTS INTO QUOTES
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Returns font family value with quotes if required
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param string $font_value The font family value.
|
||||
* @param string $quote Optional. The wrapping character. Default '"'.
|
||||
*
|
||||
* @return string Ready to use font family value.
|
||||
*/
|
||||
|
||||
function fictioneer_font_family_value( $font_value, $quote = '"' ) {
|
||||
if ( preg_match( '/\s/', $font_value ) ) {
|
||||
return $quote . $font_value . $quote;
|
||||
} else {
|
||||
return $font_value;
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// GET FONT COLORS
|
||||
// =============================================================================
|
||||
@ -2720,4 +2742,245 @@ function fictioneer_append_meta_fields( $post_type, $meta_key, $meta_value ) {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// VALIDATE GOOGLE FONTS LINK
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Validates Google Fonts link
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param string $link The Google Fonts link.
|
||||
*
|
||||
* @return boolean Whether the link is valid or not.
|
||||
*/
|
||||
|
||||
function fictioneer_validate_google_fonts_link( $link ) {
|
||||
return preg_match( '/^https:\/\/fonts\.googleapis\.com\/css2/', $link ) === 1;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// EXTRACT FONT DATA FROM GOOGLE FONTS LINK
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Returns fonts data from a Google Fonts link
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param string $link The Google Fonts link.
|
||||
*
|
||||
* @return array|false|null The font data if successful, false if malformed,
|
||||
* null if not a valid Google Fonts link.
|
||||
*/
|
||||
|
||||
function fictioneer_extract_font_from_google_link( $link ) {
|
||||
// Validate
|
||||
if ( ! fictioneer_validate_google_fonts_link( $link ) ) {
|
||||
// Not Google Fonts link
|
||||
return null;
|
||||
}
|
||||
|
||||
// Setup
|
||||
$font = array(
|
||||
'google_link' => $link,
|
||||
'skip' => true,
|
||||
'chapter' => true,
|
||||
'version' => '',
|
||||
'key' => '',
|
||||
'name' => '',
|
||||
'family' => '',
|
||||
'type' => '',
|
||||
'styles' => ['normal'],
|
||||
'weights' => [],
|
||||
'charsets' => [],
|
||||
'formats' => [],
|
||||
'about' => __( 'This font is loaded via the Google Fonts CDN, see source for additional information.', 'fictioneer' ),
|
||||
'note' => '',
|
||||
'sources' => array(
|
||||
'googleFontsCss' => array(
|
||||
'name' => 'Google Fonts CSS File',
|
||||
'url' => $link
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// Name?
|
||||
preg_match( '/family=([^:]+)/', $link, $name_matches );
|
||||
|
||||
if ( ! empty( $name_matches ) ) {
|
||||
$font['name'] = str_replace( '+', ' ', $name_matches[1] );
|
||||
$font['family'] = $font['name'];
|
||||
$font['key'] = sanitize_title( $font['name'] );
|
||||
} else {
|
||||
// Link malformed
|
||||
return false;
|
||||
}
|
||||
|
||||
// Italic? Weights?
|
||||
preg_match( '/ital,wght@([0-9,;]+)/', $link, $ital_weight_matches );
|
||||
|
||||
if ( ! empty( $ital_weight_matches ) ) {
|
||||
$specifications = explode( ';', $ital_weight_matches[1] );
|
||||
$weights = [];
|
||||
$is_italic = false;
|
||||
|
||||
foreach ( $specifications as $spec ) {
|
||||
list( $ital, $weight ) = explode( ',', $spec );
|
||||
|
||||
if ( $ital == '1' ) {
|
||||
$is_italic = true;
|
||||
}
|
||||
|
||||
$weights[ $weight ] = true;
|
||||
}
|
||||
|
||||
if ( $is_italic ) {
|
||||
$font['styles'][] = 'italic';
|
||||
}
|
||||
|
||||
$font['weights'] = array_keys( $weights );
|
||||
}
|
||||
|
||||
// Done
|
||||
return $font;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// GET FONT DATA
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Returns fonts included by the theme
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @return array Array of font data.
|
||||
*/
|
||||
|
||||
function fictioneer_get_font_data() {
|
||||
// Setup
|
||||
$parent_font_dir = get_template_directory() . '/fonts';
|
||||
$child_font_dir = get_stylesheet_directory() . '/fonts';
|
||||
$parent_fonts = [];
|
||||
$child_fonts = [];
|
||||
$google_fonts = [];
|
||||
|
||||
// Helper function
|
||||
$extract_font_data = function( $font_dir, &$fonts, $theme = 'parent' ) {
|
||||
if ( is_dir( $font_dir ) ) {
|
||||
$font_folders = array_diff( scandir( $font_dir ), ['..', '.'] );
|
||||
|
||||
foreach ( $font_folders as $folder ) {
|
||||
$full_path = "{$font_dir}/{$folder}";
|
||||
$json_file = "$full_path/font.json";
|
||||
$css_file = "$full_path/font.css";
|
||||
|
||||
if ( is_dir( $full_path ) && file_exists( $json_file ) && file_exists( $css_file ) ) {
|
||||
$folder_name = basename( $folder );
|
||||
$data = @json_decode( file_get_contents( $json_file ), true );
|
||||
|
||||
if ( $data && json_last_error() === JSON_ERROR_NONE ) {
|
||||
if ( ! ( $data['remove'] ?? 0 ) ) {
|
||||
$data['css_path'] = "/fonts/{$folder_name}/font.css";
|
||||
$data['css_file'] = $css_file;
|
||||
$data['in_child_theme'] = $theme === 'child';
|
||||
|
||||
$fonts[ $data['key'] ] = $data;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $fonts;
|
||||
}
|
||||
};
|
||||
|
||||
// Parent theme
|
||||
$extract_font_data( $parent_font_dir, $parent_fonts );
|
||||
|
||||
// Child theme (if any)
|
||||
if ( $parent_font_dir !== $child_font_dir ) {
|
||||
$extract_font_data( $child_font_dir, $child_fonts, 'child' );
|
||||
}
|
||||
|
||||
// Google Fonts links (if any)
|
||||
$google_fonts_links = get_option( 'fictioneer_google_fonts_links' );
|
||||
|
||||
if ( $google_fonts_links ) {
|
||||
$google_fonts_links = explode( "\n", $google_fonts_links );
|
||||
|
||||
foreach ( $google_fonts_links as $link ) {
|
||||
$font = fictioneer_extract_font_from_google_link( $link );
|
||||
|
||||
if ( $font ) {
|
||||
$google_fonts[] = $font;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Merge finds
|
||||
$fonts = array_merge( $parent_fonts, $child_fonts, $google_fonts );
|
||||
|
||||
// Apply filters
|
||||
$fonts = apply_filters( 'fictioneer_filter_font_data', $fonts );
|
||||
|
||||
// Return complete font list
|
||||
return $fonts;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// BUILD BUNDLED FONT CSS FILE
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Build bundled font stylesheet
|
||||
*
|
||||
* @since 5.10.0
|
||||
*/
|
||||
|
||||
function fictioneer_build_bundled_fonts() {
|
||||
// Setup
|
||||
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
|
||||
$fonts = fictioneer_get_font_data();
|
||||
$combined_font_css = '';
|
||||
$font_stack = [];
|
||||
|
||||
// Apply filters
|
||||
$fonts = apply_filters( 'fictioneer_filter_pre_build_bundled_fonts', $fonts );
|
||||
|
||||
// Make sure directory exists
|
||||
if ( ! file_exists( dirname( $bundled_fonts ) ) ) {
|
||||
mkdir( dirname( $bundled_fonts ), 0755, true );
|
||||
}
|
||||
|
||||
// Build
|
||||
foreach ( $fonts as $font ) {
|
||||
if ( $font['chapter'] ?? 0 ) {
|
||||
$font_stack[ $font['key'] ] = array(
|
||||
'css' => fictioneer_font_family_value( $font['family'] ?? '' ),
|
||||
'name' => $font['name'] ?? '',
|
||||
'alt' => $font['alt'] ?? ''
|
||||
);
|
||||
}
|
||||
|
||||
if ( ! ( $font['skip'] ?? 0 ) && ! ( $font['google_link'] ?? 0 ) ) {
|
||||
$css = file_get_contents( $font['css_file'] );
|
||||
|
||||
if ( $font['in_child_theme'] ?? 0 ) {
|
||||
$css = str_replace( '../fonts/', get_stylesheet_directory_uri() . '/fonts/', $css );
|
||||
}
|
||||
|
||||
$combined_font_css .= $css;
|
||||
}
|
||||
}
|
||||
|
||||
// Update options
|
||||
update_option( 'fictioneer_chapter_fonts', $font_stack, true );
|
||||
|
||||
// Save
|
||||
file_put_contents( $bundled_fonts, $combined_font_css );
|
||||
}
|
||||
|
||||
?>
|
||||
|
@ -996,6 +996,14 @@ define( 'FICTIONEER_OPTIONS', array(
|
||||
'label' => __( 'Age confirmation modal content for posts.', 'fictioneer' ),
|
||||
'default' => __( 'This content is intended for an adult audience. Please confirm that you are of legal age (18+) or leave the website.', 'fictioneer' ),
|
||||
'placeholder' => __( 'This content is intended for an adult audience. Please confirm that you are of legal age (18+) or leave the website.', 'fictioneer' )
|
||||
),
|
||||
'fictioneer_google_fonts_links' => array(
|
||||
'name' => 'fictioneer_google_fonts_links',
|
||||
'group' => 'fictioneer-settings-fonts-group',
|
||||
'sanitize_callback' => 'fictioneer_sanitize_google_fonts_links',
|
||||
'label' => __( 'List of Google Fonts links', 'fictioneer' ),
|
||||
'default' => '',
|
||||
'placeholder' => __( 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap', 'fictioneer' )
|
||||
)
|
||||
)
|
||||
));
|
||||
@ -1210,6 +1218,39 @@ function fictioneer_sanitize_disable_widget_checkbox( $value ) {
|
||||
return filter_var( $value, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE );
|
||||
}
|
||||
|
||||
/**
|
||||
* Sanitizes the textarea input for Google Fonts links
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param string $value The textarea string.
|
||||
*
|
||||
* @return string The sanitized textarea string.
|
||||
*/
|
||||
|
||||
function fictioneer_sanitize_google_fonts_links( $value ) {
|
||||
// Setup
|
||||
$value = sanitize_textarea_field( $value );
|
||||
$lines = explode( "\n", $value );
|
||||
$valid_links = [];
|
||||
|
||||
// Validate and sanitize each line
|
||||
foreach ( $lines as $line ) {
|
||||
$line = trim( $line );
|
||||
|
||||
if ( fictioneer_validate_google_fonts_link( $line ) ) {
|
||||
$sanitized_link = filter_var( $line, FILTER_SANITIZE_URL );
|
||||
|
||||
if ( $sanitized_link !== false ) {
|
||||
$valid_links[] = $sanitized_link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Continue saving process
|
||||
return implode( "\n", array_unique( $valid_links ) );
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// SANITIZE OPTION FILTERS
|
||||
// =============================================================================
|
||||
@ -1280,7 +1321,7 @@ add_filter( 'sanitize_option_fictioneer_404_page', function( $new_value ) {
|
||||
* @since 5.9.4
|
||||
*
|
||||
* @param mixed $old_value The value before the update.
|
||||
* @param mixed $value The new value;
|
||||
* @param mixed $value The new value.
|
||||
*/
|
||||
|
||||
function fictioneer_update_option_disable_extended_story_list_meta_queries( $old_value, $value ) {
|
||||
@ -1304,7 +1345,7 @@ add_action(
|
||||
* @since 5.9.4
|
||||
*
|
||||
* @param mixed $old_value The value before the update.
|
||||
* @param mixed $value The new value;
|
||||
* @param mixed $value The new value.
|
||||
*/
|
||||
|
||||
function fictioneer_update_option_disable_extended_chapter_list_meta_queries( $old_value, $value ) {
|
||||
@ -1322,4 +1363,18 @@ add_action(
|
||||
2
|
||||
);
|
||||
|
||||
/**
|
||||
* Rebuilds bundled fonts after Google Fonts links update
|
||||
*
|
||||
* @since 5.10.0
|
||||
*
|
||||
* @param mixed $old_value The value before the update.
|
||||
* @param mixed $value The new value.
|
||||
*/
|
||||
|
||||
function fictioneer_updated_google_fonts( $old_value, $value ) {
|
||||
fictioneer_build_bundled_fonts();
|
||||
}
|
||||
add_action( 'update_option_fictioneer_google_fonts_links', 'fictioneer_updated_google_fonts', 10, 2 );
|
||||
|
||||
?>
|
||||
|
@ -84,6 +84,15 @@ function fictioneer_add_admin_menu() {
|
||||
'fictioneer_settings_phrases'
|
||||
);
|
||||
|
||||
$fonts_hook = add_submenu_page(
|
||||
'fictioneer',
|
||||
__( 'Fonts', 'fictioneer' ),
|
||||
__( 'Fonts', 'fictioneer' ),
|
||||
'manage_options',
|
||||
'fictioneer_fonts',
|
||||
'fictioneer_settings_fonts'
|
||||
);
|
||||
|
||||
$epubs_hook = add_submenu_page(
|
||||
'fictioneer',
|
||||
__( 'ePUBs', 'fictioneer' ),
|
||||
@ -227,6 +236,9 @@ if ( ! function_exists( 'fictioneer_settings_header' ) ) {
|
||||
// Phrases tab
|
||||
$output['phrases'] = '<a href="?page=fictioneer_phrases" class="fictioneer-settings__nav-tab' . ( $tab == 'phrases' ? ' active' : '' ) . '">' . __( 'Phrases', 'fictioneer' ) . '</a>';
|
||||
|
||||
// Fonts tab
|
||||
$output['fonts'] = '<a href="?page=fictioneer_fonts" class="fictioneer-settings__nav-tab' . ( $tab == 'fonts' ? ' active' : '' ) . '">' . __( 'Fonts', 'fictioneer' ) . '</a>';
|
||||
|
||||
// EPubs tab
|
||||
$output['epubs'] = '<a href="?page=fictioneer_epubs" class="fictioneer-settings__nav-tab' . ( $tab == 'epubs' ? ' active' : '' ) . '">' . __( 'ePUBs', 'fictioneer' ) . '</a>';
|
||||
|
||||
@ -343,6 +355,16 @@ function fictioneer_settings_phrases() {
|
||||
get_template_part( 'includes/functions/settings/_settings_page_phrases' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for fonts settings page
|
||||
*
|
||||
* @since 4.9.4
|
||||
*/
|
||||
|
||||
function fictioneer_settings_fonts() {
|
||||
get_template_part( 'includes/functions/settings/_settings_page_fonts' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for tools settings page
|
||||
*
|
||||
|
@ -339,6 +339,13 @@ function fictioneer_tools_purge_theme_caches() {
|
||||
fictioneer_purge_nav_menu_transients();
|
||||
fictioneer_delete_transients_like( 'fictioneer_' );
|
||||
|
||||
// Files
|
||||
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
|
||||
|
||||
if ( file_exists( $bundled_fonts ) ) {
|
||||
unlink( $bundled_fonts );
|
||||
}
|
||||
|
||||
// Log
|
||||
fictioneer_log( __( 'Purged theme caches.', 'fictioneer' ) );
|
||||
|
||||
|
193
includes/functions/settings/_settings_page_fonts.php
Normal file
193
includes/functions/settings/_settings_page_fonts.php
Normal file
@ -0,0 +1,193 @@
|
||||
<?php
|
||||
/**
|
||||
* Partial: Plugin Settings
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Fictioneer
|
||||
* @since 5.9.4
|
||||
*/
|
||||
?>
|
||||
|
||||
<?php
|
||||
|
||||
// Setup
|
||||
$fonts = fictioneer_get_font_data();
|
||||
|
||||
?>
|
||||
|
||||
<div class="fictioneer-settings">
|
||||
|
||||
<?php fictioneer_settings_header( 'fonts' ); ?>
|
||||
|
||||
<div class="fictioneer-settings__content">
|
||||
|
||||
<form method="post" action="options.php" class="fictioneer-form">
|
||||
<?php settings_fields( 'fictioneer-settings-fonts-group' ); ?>
|
||||
|
||||
<div class="fictioneer-single-column">
|
||||
|
||||
<div class="fictioneer-card">
|
||||
<div class="fictioneer-card__wrapper">
|
||||
<h3 class="fictioneer-card__header"><?php _e( 'Google Fonts', 'fictioneer' ); ?></h3>
|
||||
<div class="fictioneer-card__content">
|
||||
|
||||
<div class="fictioneer-card__row">
|
||||
<p><?php
|
||||
printf(
|
||||
__( 'You can install <a href="%s" target="_blank">Google Fonts</a> by adding the embed link below, which you can find in the href attribute provided on the right after selecting the font styles. One font per link, but be aware that the more fonts you load, the slower your site becomes. Also note that using Google Fonts violates the GDPR.', 'fictioneer' ),
|
||||
'https://fonts.google.com/'
|
||||
);
|
||||
?></p>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-card__row">
|
||||
<textarea name="fictioneer_google_fonts_links" id="fictioneer_google_fonts_links" rows="4" placeholder="<?php echo FICTIONEER_OPTIONS['strings']['fictioneer_google_fonts_links']['placeholder']; ?>"><?php echo get_option( 'fictioneer_google_fonts_links' ); ?></textarea>
|
||||
<p class="fictioneer-sub-label"><?php _e( 'Only one font per link per line.', 'fictioneer' ); ?></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-actions"><?php submit_button(); ?></div>
|
||||
|
||||
<div>
|
||||
<h1 style="margin-bottom: 12px;"><?php _e( 'Installed Fonts', 'fictioneer' ); ?></h1>
|
||||
<p><?php
|
||||
printf(
|
||||
__( 'See <a href="%s" target="_blank">installation guide</a> on how to add custom fonts yourself. You can assign fonts in the <a href="%s">Customizer</a>. If the fonts are listed but not displayed, purge the theme caches under <a href="%s">Tools</a> and force-refresh he page to clear the browser cache as well.', 'fictioneer' ),
|
||||
'https://github.com/Tetrakern/fictioneer/blob/main/INSTALLATION.md#custom-fonts',
|
||||
wp_customize_url(),
|
||||
'?page=fictioneer_tools'
|
||||
);
|
||||
?></p>
|
||||
</div>
|
||||
|
||||
<?php foreach ( $fonts as $key => $font ) : ?>
|
||||
|
||||
<?php
|
||||
$fallback = _x( 'n/a', 'Settings font card.', 'fictioneer' );
|
||||
$name = $font['name'] ?? $key;
|
||||
$family = $font['family'] ?? $fallback;
|
||||
$type = $font['type'] ?? '';
|
||||
$skip = $font['skip'] ?? false;
|
||||
$version = $font['version'] ?? '';
|
||||
$charsets = $font['charsets'] ?? [ $fallback ];
|
||||
$formats = $font['formats'] ?? [ $fallback ];
|
||||
$about = $font['about'] ?? _x( 'No description provided', 'Settings font card.', 'fictioneer' );
|
||||
$weights = $font['weights'] ?? [ $fallback ];
|
||||
$styles = $font['styles'] ?? [ $fallback ];
|
||||
$sources = $font['sources'] ?? [];
|
||||
$note = $font['note'] ?? '';
|
||||
?>
|
||||
|
||||
<div class="fictioneer-card">
|
||||
<div class="fictioneer-card__wrapper">
|
||||
<h3 class="fictioneer-card__header"><?php
|
||||
echo $name;
|
||||
|
||||
if ( ! empty( $version ) ) {
|
||||
printf( _x( ' (v%s)', 'Settings font card.', 'fictioneer' ), $version );
|
||||
}
|
||||
|
||||
if ( $font['in_child_theme'] ?? 0 ) {
|
||||
_ex( ' — Child Theme', 'Settings font card.', 'fictioneer' );
|
||||
}
|
||||
|
||||
if ( $font['google_link'] ?? 0 ) {
|
||||
_ex( ' — Google Fonts CDN', 'Settings font card.', 'fictioneer' );
|
||||
}
|
||||
?></h3>
|
||||
|
||||
<div class="fictioneer-card__content">
|
||||
|
||||
<div class="fictioneer-card__row"><?php
|
||||
echo $about;
|
||||
|
||||
if ( ! empty( $sources ) ) {
|
||||
echo _nx(
|
||||
' <strong>Source:</strong> ',
|
||||
' <strong>Sources:</strong> ',
|
||||
count( $sources ),
|
||||
'Settings font card.',
|
||||
'fictioneer'
|
||||
);
|
||||
|
||||
echo implode(
|
||||
', ',
|
||||
array_map(
|
||||
function( $item ) {
|
||||
return sprintf( '<a href="%s" target="_blank">%s</a>', $item['url'], $item['name'] );
|
||||
},
|
||||
$sources
|
||||
)
|
||||
);
|
||||
}
|
||||
?></div>
|
||||
|
||||
<?php if ( ! empty( $note ) ): ?>
|
||||
<div class="fictioneer-card__row"><?php
|
||||
printf( _x( '<strong>Note:</strong> %s', 'Settings font card.', 'fictioneer' ), $note );
|
||||
?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="fictioneer-card__row" style="font-family: <?php echo $font['family'] ?? 'inherit'; ?>; font-size: 20px; text-align: center; margin: 24px 0;"><?php
|
||||
echo $font['preview'] ?? _x( 'The quick brown fox jumps over the lazy dog.', 'Settings font fallback preview sentence.', 'fictioneer' );
|
||||
?></div>
|
||||
|
||||
<div class="fictioneer-card__row fictioneer-card__row--boxes">
|
||||
|
||||
<div class="fictioneer-card__box" style="flex-grow: 2;">
|
||||
<div class="fictioneer-card__box-title"><?php
|
||||
_ex( 'Weights', 'Settings font card.', 'fictioneer' );
|
||||
?></div>
|
||||
<div class="fictioneer-card__box-content"><?php echo implode( ', ', $weights ) ?: $fallback; ?></div>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-card__box">
|
||||
<div class="fictioneer-card__box-title"><?php
|
||||
_ex( 'Styles', 'Settings font card.', 'fictioneer' );
|
||||
?></div>
|
||||
<div class="fictioneer-card__box-content"><?php echo implode( ', ', $styles ) ?: $fallback; ?></div>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-card__box">
|
||||
<div class="fictioneer-card__box-title"><?php
|
||||
_ex( 'Formats', 'Settings font card.', 'fictioneer' );
|
||||
?></div>
|
||||
<div class="fictioneer-card__box-content"><?php echo implode( ', ', $formats ) ?: $fallback; ?></div>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-card__box">
|
||||
<div class="fictioneer-card__box-title"><?php
|
||||
_ex( 'Family', 'Settings font card.', 'fictioneer' );
|
||||
?></div>
|
||||
<div class="fictioneer-card__box-content"><?php
|
||||
echo fictioneer_font_family_value( $family );
|
||||
|
||||
if ( ! empty( $type ) ) {
|
||||
echo ", {$type}";
|
||||
}
|
||||
?></div>
|
||||
</div>
|
||||
|
||||
<div class="fictioneer-card__box" style="flex-grow: 8;">
|
||||
<div class="fictioneer-card__box-title"><?php
|
||||
_ex( 'Charsets', 'Settings font card.', 'fictioneer' );
|
||||
?></div>
|
||||
<div class="fictioneer-card__box-content"><?php echo implode( ', ', $charsets ) ?: $fallback; ?></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<?php do_action( 'fictioneer_admin_settings_fonts' ); ?>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
2
js/chapter.min.js
vendored
2
js/chapter.min.js
vendored
File diff suppressed because one or more lines are too long
1
repo/fonts/noto-sans-jp/font.css
Normal file
1
repo/fonts/noto-sans-jp/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:'Noto Sans JP';font-style:normal;font-weight:300;src:url('../fonts/noto-sans-jp/noto-sans-jp-v52-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans JP';font-style:normal;font-weight:400;src:url('../fonts/noto-sans-jp/noto-sans-jp-v52-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans JP';font-style:normal;font-weight:500;src:url('../fonts/noto-sans-jp/noto-sans-jp-v52-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans JP';font-style:normal;font-weight:600;src:url('../fonts/noto-sans-jp/noto-sans-jp-v52-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans JP';font-style:normal;font-weight:700;src:url('../fonts/noto-sans-jp/noto-sans-jp-v52-700.woff2') format('woff2')}
|
26
repo/fonts/noto-sans-jp/font.json
Normal file
26
repo/fonts/noto-sans-jp/font.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "52",
|
||||
"key": "noto-sans-jp",
|
||||
"name": "Noto Sans JP",
|
||||
"family": "Noto Sans JP",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal"],
|
||||
"weights": [400],
|
||||
"charsets": ["cyrillic", "japanese", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language and other languages used in Japan. It covers Hiragana, Katakana and Kanji. It also supports Latin, Cyrillic, Greek and Hangul.",
|
||||
"note": "",
|
||||
"preview": "人類社会のすべての構成員の固有の尊厳と平等で譲ることのできない権利とを承認することは",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans+JP"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans-jp?subsets=cyrillic,japanese,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-300.woff2
Normal file
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-300.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-500.woff2
Normal file
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-500.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-600.woff2
Normal file
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-600.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-700.woff2
Normal file
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-700.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-regular.woff2
Normal file
BIN
repo/fonts/noto-sans-jp/noto-sans-jp-v52-regular.woff2
Normal file
Binary file not shown.
1
repo/fonts/noto-sans-kr/font.css
Normal file
1
repo/fonts/noto-sans-kr/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:'Noto Sans KR';font-style:normal;font-weight:300;src:url('../fonts/noto-sans-kr/noto-sans-kr-v36-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans KR';font-style:normal;font-weight:400;src:url('../fonts/noto-sans-kr/noto-sans-kr-v36-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans KR';font-style:normal;font-weight:500;src:url('../fonts/noto-sans-kr/noto-sans-kr-v36-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans KR';font-style:normal;font-weight:600;src:url('../fonts/noto-sans-kr/noto-sans-kr-v36-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans KR';font-style:normal;font-weight:700;src:url('../fonts/noto-sans-kr/noto-sans-kr-v36-700.woff2') format('woff2')}
|
26
repo/fonts/noto-sans-kr/font.json
Normal file
26
repo/fonts/noto-sans-kr/font.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "36",
|
||||
"key": "noto-sans-kr",
|
||||
"name": "Noto Sans KR",
|
||||
"family": "Noto Sans KR",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "korean", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans KR is an unmodulated (“sans serif”) design for the Korean language using Hangul and the Korean Hanja scripts. It also supports Hiragana, Katakana, Latin, Cyrillic and Greek.",
|
||||
"note": "",
|
||||
"preview": "모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans+KR"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans-kr?subsets=cyrillic,korean,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-300.woff2
Normal file
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-300.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-500.woff2
Normal file
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-500.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-600.woff2
Normal file
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-600.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-700.woff2
Normal file
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-700.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-regular.woff2
Normal file
BIN
repo/fonts/noto-sans-kr/noto-sans-kr-v36-regular.woff2
Normal file
Binary file not shown.
1
repo/fonts/noto-sans-sc/font.css
Normal file
1
repo/fonts/noto-sans-sc/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:'Noto Sans SC';font-style:normal;font-weight:300;src:url('../fonts/noto-sans-sc/noto-sans-sc-v36-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans SC';font-style:normal;font-weight:400;src:url('../fonts/noto-sans-sc/noto-sans-sc-v36-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans SC';font-style:normal;font-weight:500;src:url('../fonts/noto-sans-sc/noto-sans-sc-v36-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans SC';font-style:normal;font-weight:600;src:url('../fonts/noto-sans-sc/noto-sans-sc-v36-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans SC';font-style:normal;font-weight:700;src:url('../fonts/noto-sans-sc/noto-sans-sc-v36-700.woff2') format('woff2')}
|
26
repo/fonts/noto-sans-sc/font.json
Normal file
26
repo/fonts/noto-sans-sc/font.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "44",
|
||||
"key": "noto-sans-sc",
|
||||
"name": "Noto Sans SC",
|
||||
"family": "Noto Sans SC",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["chinese-simplified", "cyrillic", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans SC is an unmodulated (“sans serif”) design for languages in mainland China that use the Simplified Chinese variant of the Han ideograms. It also supports Hiragana, Katakana, Latin, Cyrillic, Greek and Hangul.",
|
||||
"note": "",
|
||||
"preview": "鉴于对人类家庭所有成员的固有尊严及其平等的和不移的权利的承认,乃是世界自由、正义与和平的基础",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans+SC"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans-sc?subsets=chinese-simplified,cyrillic,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-300.woff2
Normal file
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-300.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-500.woff2
Normal file
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-500.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-600.woff2
Normal file
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-600.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-700.woff2
Normal file
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-700.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-regular.woff2
Normal file
BIN
repo/fonts/noto-sans-sc/noto-sans-sc-v36-regular.woff2
Normal file
Binary file not shown.
1
repo/fonts/noto-sans-tc/font.css
Normal file
1
repo/fonts/noto-sans-tc/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:'Noto Sans TC';font-style:normal;font-weight:300;src:url('../fonts/noto-sans-tc/noto-sans-tc-v35-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans TC';font-style:normal;font-weight:400;src:url('../fonts/noto-sans-tc/noto-sans-tc-v35-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans TC';font-style:normal;font-weight:500;src:url('../fonts/noto-sans-tc/noto-sans-tc-v35-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans TC';font-style:normal;font-weight:600;src:url('../fonts/noto-sans-tc/noto-sans-tc-v35-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans TC';font-style:normal;font-weight:700;src:url('../fonts/noto-sans-tc/noto-sans-tc-v35-700.woff2') format('woff2')}
|
26
repo/fonts/noto-sans-tc/font.json
Normal file
26
repo/fonts/noto-sans-tc/font.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "23",
|
||||
"key": "noto-sans-tc",
|
||||
"name": "Noto Sans TC",
|
||||
"family": "Noto Sans TC",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["chinese-traditional", "cyrillic", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans TC is an unmodulated (“sans serif”) design for languages in Taiwan and Macau that use the Traditional Chinese variant of the Han ideograms. It also supports Hiragana, Katakana, Latin, Cyrillic, Greek and Hangul.",
|
||||
"note": "",
|
||||
"preview": "鑑於人類社會個成員儕有個固有尊嚴脫仔平等個脫仔勿移個權利承認,是世界自由、正義脫仔和平個基礎",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans+TC"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans-tc?subsets=chinese-traditional,cyrillic,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-300.woff2
Normal file
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-300.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-500.woff2
Normal file
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-500.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-600.woff2
Normal file
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-600.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-700.woff2
Normal file
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-700.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-regular.woff2
Normal file
BIN
repo/fonts/noto-sans-tc/noto-sans-tc-v35-regular.woff2
Normal file
Binary file not shown.
1
repo/fonts/noto-sans/font.css
Normal file
1
repo/fonts/noto-sans/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:300;src:url('../fonts/noto-sans/noto-sans-v35-300.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:300;src:url('../fonts/noto-sans/noto-sans-v35-300italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:400;src:url('../fonts/noto-sans/noto-sans-v35-regular.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:400;src:url('../fonts/noto-sans/noto-sans-v35-italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:500;src:url('../fonts/noto-sans/noto-sans-v35-500.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:500;src:url('../fonts/noto-sans/noto-sans-v35-500italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:600;src:url('../fonts/noto-sans/noto-sans-v35-600.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:600;src:url('../fonts/noto-sans/noto-sans-v35-600italic.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:normal;font-weight:700;src:url('../fonts/noto-sans/noto-sans-v35-700.woff2') format('woff2')}@font-face{font-display:swap;font-family:'Noto Sans';font-style:italic;font-weight:700;src:url('../fonts/noto-sans/noto-sans-v35-700italic.woff2') format('woff2')}
|
28
repo/fonts/noto-sans/font.json
Normal file
28
repo/fonts/noto-sans/font.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"skip": false,
|
||||
"remove": false,
|
||||
"chapter": true,
|
||||
"version": "35",
|
||||
"key": "noto-sans",
|
||||
"name": "Noto Sans",
|
||||
"family": "Noto Sans",
|
||||
"alt": "",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [300, 400, 500, 600, 700],
|
||||
"charsets": ["cyrillic", "cyrillic-ext", "devanagari", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Noto Sans is an unmodulated (“sans serif”) design for texts in the Latin, Cyrillic and Greek scripts, which is also suitable as the complementary choice for other script-specific Noto Sans fonts.",
|
||||
"note": "",
|
||||
"preview": "The quick brown fox jumps over the lazy dog.",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/noto/specimen/Noto+Sans"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/noto-sans?subsets=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin,latin-ext,vietnamese"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/noto-sans/noto-sans-v35-300.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-300.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-300italic.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-300italic.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-500.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-500.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-500italic.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-500italic.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-600.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-600.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-600italic.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-600italic.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-700.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-700.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-700italic.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-700italic.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-italic.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-italic.woff2
Normal file
Binary file not shown.
BIN
repo/fonts/noto-sans/noto-sans-v35-regular.woff2
Normal file
BIN
repo/fonts/noto-sans/noto-sans-v35-regular.woff2
Normal file
Binary file not shown.
1
repo/fonts/special-elite/font.css
Normal file
1
repo/fonts/special-elite/font.css
Normal file
@ -0,0 +1 @@
|
||||
@font-face {font-display: swap;font-family:"Special Elite";font-style: normal;font-weight: 400;src: url("../fonts/special-elite/special-elite-v18-regular.woff2") format("woff2");}
|
25
repo/fonts/special-elite/font.json
Normal file
25
repo/fonts/special-elite/font.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "18",
|
||||
"key": "special-elite",
|
||||
"name": "Special Elite",
|
||||
"family": "Special Elite",
|
||||
"type": "serif",
|
||||
"styles": ["normal"],
|
||||
"weights": [400],
|
||||
"charsets": ["latin"],
|
||||
"formats": ["woff2"],
|
||||
"about": "Special Elite mimics the Smith Corona Special Elite Type Number NR6 and Remington Noiseless typewriter models. A little bit of inked up grunge and a little old school analog flavor work together to give you a vintage typewriter typeface for your website and designs.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"googleFonts": {
|
||||
"name": "Google Fonts",
|
||||
"url": "https://fonts.google.com/specimen/Special+Elite"
|
||||
},
|
||||
"googleWebfontsHelper": {
|
||||
"name": "Google Webfonts Helper",
|
||||
"url": "https://gwfh.mranftl.com/fonts/special-elite?subsets=latin"
|
||||
}
|
||||
}
|
||||
}
|
BIN
repo/fonts/special-elite/special-elite-v18-regular.woff2
Normal file
BIN
repo/fonts/special-elite/special-elite-v18-regular.woff2
Normal file
Binary file not shown.
0
repo/fonts/verdana/font.css
Normal file
0
repo/fonts/verdana/font.css
Normal file
21
repo/fonts/verdana/font.json
Normal file
21
repo/fonts/verdana/font.json
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"skip": false,
|
||||
"chapter": true,
|
||||
"version": "2.35",
|
||||
"key": "verdana",
|
||||
"name": "Verdana",
|
||||
"family": "Verdana",
|
||||
"type": "sans-serif",
|
||||
"styles": ["normal", "italic"],
|
||||
"weights": [400, 700],
|
||||
"charsets": ["armenian", "cyrillic", "greek", "latin", "latin-ext"],
|
||||
"formats": ["ttf"],
|
||||
"about": "The Verdana typeface family consists of four TrueType fonts created specifically to address the challenges of on-screen display. Designed by world renowned type designer Matthew Carter, and hand-hinted by leading hinting expert, Agfa Monotype's Tom Rickner, these sans serif fonts are unique examples of type design for the computer screen.",
|
||||
"note": "",
|
||||
"sources": {
|
||||
"microsoft": {
|
||||
"name": "Microsoft",
|
||||
"url": "https://learn.microsoft.com/en-us/typography/font-list/verdana"
|
||||
}
|
||||
}
|
||||
}
|
@ -54,7 +54,7 @@ get_header( null, $header_args );
|
||||
);
|
||||
?>
|
||||
|
||||
<article id="<?php the_ID(); ?>" class="story__article <?php if ( ! $can_checkmarks ) echo '_no-checkmarks'; ?>" data-age-rating="<?php echo strtolower( $story['rating'] ); ?>">
|
||||
<article id="post-<?php the_ID(); ?>" class="story__article <?php if ( ! $can_checkmarks ) echo '_no-checkmarks'; ?>" data-id="<?php the_ID(); ?>" data-age-rating="<?php echo strtolower( $story['rating'] ); ?>">
|
||||
|
||||
<?php
|
||||
// Render article header
|
||||
|
@ -556,11 +556,11 @@ function fcn_setFormatting(value) {
|
||||
index = fcn_clamp(0, fictioneer_fonts.length - 1, index);
|
||||
|
||||
// Prepare font family
|
||||
let fontFamily = `"${fictioneer_fonts[index].css}"`;
|
||||
let fontFamily = fictioneer_fonts[index].css;
|
||||
|
||||
// Add alternative fonts if any
|
||||
if (fictioneer_fonts[index].alt) {
|
||||
fontFamily = `${fontFamily}, "${fictioneer_fonts[index].alt}"`;
|
||||
fontFamily = `${fontFamily}, ${fictioneer_fonts[index].alt}`;
|
||||
}
|
||||
|
||||
// Catch non-indexed values
|
||||
@ -575,7 +575,7 @@ function fcn_setFormatting(value) {
|
||||
|
||||
// Update inline style
|
||||
_$$('.chapter-font-family').forEach(element => {
|
||||
element.style.fontFamily = fontFamily === '""' ? 'var(--ff-system)' : fontFamily + ', var(--ff-system)';
|
||||
element.style.fontFamily = fontFamily === '' ? 'var(--ff-system)' : fontFamily + ', var(--ff-system)';
|
||||
});
|
||||
|
||||
// Update local storage
|
||||
|
@ -175,7 +175,7 @@
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--e-2);
|
||||
font-family: var(--ff-note);
|
||||
font-family: var(--ff-card-body);
|
||||
padding: var(--card-body-container-padding, clamp(0.75rem, 3.25cqw, 1.25rem));
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
height: 100%; // Fill to align with siblings
|
||||
@ -197,8 +197,8 @@
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
font-family: var(--ff-card-title);
|
||||
font-size: var(--card-title-font-size, clamp(15px, 3.065cqw, 18px));
|
||||
font-family: var(--ff-heading); // Redundant for safety
|
||||
|
||||
&._with-delete {
|
||||
padding-right: 1.75em;
|
||||
@ -405,6 +405,7 @@
|
||||
}
|
||||
|
||||
&-link {
|
||||
font-family: var(--ff-card-list-link);
|
||||
padding: 4px 0; // Increase link click target
|
||||
}
|
||||
|
||||
|
@ -121,6 +121,7 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--ff-chapter-title);
|
||||
font-size: get_relative_clamp(1.25, 1.75, 320, $full-width, 'vw', 'em');
|
||||
line-height: 1.3;
|
||||
margin-top: .25rem;
|
||||
|
@ -39,7 +39,7 @@
|
||||
content-visibility: auto;
|
||||
|
||||
&-heading {
|
||||
font: 700 var(--site-title-font-size)/1.3 var(--site-title-font);
|
||||
font: 700 var(--site-title-font-size)/1.3 var(--ff-site-title);
|
||||
letter-spacing: 0;
|
||||
|
||||
a {
|
||||
@ -49,7 +49,7 @@
|
||||
|
||||
&-tagline {
|
||||
color: var(--site-title-tagline-color);
|
||||
font: 400 var(--site-title-tagline-font-size)/1.3 var(--ff-heading);
|
||||
font: 400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);
|
||||
letter-spacing: 0;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
@ -156,7 +156,7 @@
|
||||
}
|
||||
|
||||
&__heading {
|
||||
font: 700 var(--site-title-font-size)/1.3 var(--site-title-font);
|
||||
font: 700 var(--site-title-font-size)/1.3 var(--ff-site-title);
|
||||
letter-spacing: 0;
|
||||
|
||||
a {
|
||||
@ -166,7 +166,7 @@
|
||||
|
||||
&__tagline {
|
||||
color: var(--site-title-tagline-color);
|
||||
font: 400 var(--site-title-tagline-font-size)/1.3 var(--ff-heading);
|
||||
font: 400 var(--site-title-tagline-font-size)/1.3 var(--ff-site-title);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
|
@ -243,6 +243,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--navigation-text);
|
||||
font-family: var(--ff-nav-item);
|
||||
line-height: 1.2;
|
||||
letter-spacing: get_relative_clamp(-0.01, 0, 375, 480, 'vw', 'em');
|
||||
white-space: nowrap;
|
||||
|
@ -12,7 +12,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
a,
|
||||
.spoiler {
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
|
@ -174,6 +174,7 @@ $header_breakpoint: 640px;
|
||||
|
||||
&__identity {
|
||||
h1 {
|
||||
font-family: var(--ff-story-title);
|
||||
font-size: get_clamp(22, 32, 320, $full-width);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user