Flarum Google Fonts BBCode

Use most any Google Font thanks to Page CDN's "Easy Fonts" stylesheet.

Disclaimer: This is a fun extension and may be useful depending on the type of community. But, if you really want to get serious and you have a powerful enough server, I'm thinking the best Google Fonts BBCode would be one where you pick just 2 or 3 options for your members. Then, self host just those 2 or 3 fonts. You can fork this extension so that you see how the extend file is set up. From there, modify and link to your self hosted style sheets/font files.

Reference (to get class names needed for BBCode): https://pagecdn.com/lib/easyfonts

How to

The BBCode starts simply with f for font.

To use, after the opening tag's equals sign, enter the appropriate class name found on the reference page (link above), but leave off the beginning "font-." To save a little bit of typing time, the beginning "font-" part of the class name is added for you.

Example:
[f=beth-ellen]This will be a handwritten cursive font called Beth Ellen.[/f]

The class in the above example will be font-beth-ellen.

Install & Update

composer require zerosonesfun/flarum-google-fonts

php flarum cache:clear

Remove

composer remove zerosonesfun/flarum-google-fonts

Links

Optional: Self host the font(s)

FYI: If you’d like to fork this and create a version of this extension that self hosts a font, I have had success with this tool:

https://google-webfonts-helper.herokuapp.com/

With this tool you may quickly select and download the font files. Then add the appropriate code to your custom CSS. Once you are hosting the font files and are calling them out in your CSS, all that is left is to make a custom BBCode. The goal is to ensure a unique CSS class is called out in a HTML span tag if a user uses the custom BBCode you specify. See this extension’s extend.php file and tweak it.

I think this will make some sense if you know how BBCode in Flarum works and know HTML/CSS basics. Otherwise, it’ll be a little tricky. Sorry. But, that’s all I have time to explain right now.

Ralkage 😂... or💀... I heard the cool kids these days use 💀 instead of 😂. But, I think that’s confusing.

I almost went crazy and created a version of this for different languages. I see Google Fonts has all kinds of fonts for other languages as well. But, I better slow down. BBCode man will get burned out again if BBCode man create too many BBCode. 😂 or 💀

But, if anyone ever needs a custom BBCode give me five bucks or something and I’ll make it faster than you can say BBCode. Or within a few weeks. 😬

    17 days later

    A new version is available. Now you can use any Google font listed here:

    https://pagecdn.com/lib/easyfonts

    Also, besides linking to this CDN, which seems to load fast, nothing else is used. No extra files (JS/CSS) are added to your forum! Well, except for an extend file and composer file... the bare minimum extension files.

    See first post for more details.

    Looking at a random stylesheet it seems to be quite bad performance wise compared to google fonts, only ttf files (and they aren't doing a url rewrite to serve woff/woff2 files if the browser supports them), no unicode subsets and no variable fonts, at least they apply a swap policy to the font but just from this I don't see how they can be faster than google fonts (or a self hosted solution).

      wonderbeel

      Well, this was a solution to allow many more Google Fonts than the original extension without complexity or self hosting fonts.

      Easy Fonts CDN hosts all google fonts, plus provides some value addition like:

      • Long expiry for CSS files. (Longer than Google’s)
      • Easy debuggable font file names.
      • Font Classes. You get easy to use CSS classes to use fonts in HTML, like <div class="font-open-sans"></div>, <div class="font-lato"></div>, etc.
      • An option for single all-in-one font file that you can include in all your projects and forget about looking up Google Fonts directory again and again to get new CSS URLs.
      • Saves 1 extra DNS look up because Google CSS is hosted in fonts.googleapis.com and actual font files are served from fonts.gstatic.com while Easy Fonts' CSS and font files are both served from pagecdn.io.
      • Consistent CSS URLs. CSS for one font family will always load through one URL. This increases browser cache reuse.
      • Google Fonts CSS files mix font family names and create endless possible CSS files. This reduces browser cache sharing across websites.

      It's an easy solution that works for me. Others may enjoy it as well.

      But, really this is what I would call a novelty extension. If you really want to get serious and you have a powerful enough server, I'm thinking the best Google Fonts BBCode would be one where you pick just 2 or 3 options for your members. Then self host just those 2 or 3 fonts. In fact, I think I'll add this disclaimer to the first post.

        FYI: If you’d like to fork this and create a version of this extension that self hosts a font, I have had success with this tool:

        https://google-webfonts-helper.herokuapp.com/

        With this tool you may quickly select and download the font files. Then add the appropriate code to your custom CSS. Once you are hosting the font files and are calling them out in your CSS, all that is left is to make a custom BBCode. The goal is to ensure a unique CSS class is called out in a HTML span tag if a user uses the custom BBCode you specify. See this extension’s extend.php file and tweak it.

        I think this will make some sense if you know how BBCode in Flarum works and know HTML/CSS basics. Otherwise, it’ll be a little tricky. Sorry. But, that’s all I have time to explain right now.

        a month later
        a year later

        The link to https://pagecdn.io/lib/easyfonts/fonts.css in the extension is broken, so the extension cannot work anymore.

          Cactus1805 New version released if you want to try it out. I switched to a different CDN for the font.css file.

              6 months later

              010101 Thanks for developing this extension.

              One of my users is hoping to have this function on our flarum site for a long time.

              However, I face two issues:

              1.I think it is because Google has been blocked in China, so after I enable this extension it slows down the whole site. And then it went back to previous loading time after I disabled it. I am wondering would there a option to add font providers other than Google?

              2.It seems that the Chinese fonts provided by Google is not working on my site, these are the BBcode I use:

              
 [f=long-cang]地方大 [/f]
 [f=zcool-xiaowei] 由设计 [/f]
 [f=longcang]地方大[/f]
 [f=ma-shan-zheng]由设计[/f]
 [f=mashanzheng]由设计 [/f]
 [f=abeezee]This will be a handwritten cursive font called abeezee.[/f]
 [f=kanit]地方大 [/f]

              all above doesn't work on my site.

              By the way, I got these fonts from here

                  4 months later

                  ash3T I’m sorry for leaving you hanging. I don’t have plans to change this extension at this time.

                      5 days later

                      010101 No worries at all. I totally understand. Thanks for your reply. Also I really appreciate all your contribution to the flarum community. All the best to you.

                        3 months later