Own fonts in Mobirise Builder

Hi guys,
OK now I've been delaying this far too long - two months or more maybe. Through this time (and before) I've seen some requests around here about inserting your own custom fonts in your Mobirise Builder projects or the already included fonts with extended characters support. Personally I have a few clients which need their sites being viewed from China and Taiwan where the Big G's apis and services are being blocked from a few months so any site triying to load some assets from their CDNs practically loads if not froever at least until the end of the coffee break ;)

So I guess some solution is needed in order for us to be able to include some fonts which are hosted locally on our servers. This way we can

A. Select the particular fonts we need used in our projects and

B. Rest calm that if a particular part of the net is blocked for a location our domain names will either produce fully loaded pages or 404 messages but not something in the middle;

Before I start sharing with you what I've figured out so far please do know - it is still rather a rough data and workarounds so any aid wraping this whole thing into a sistemetized routine would be greatly apprechiated - pls do write back and share your thoights =)

So let's begin....

We all have fonts on our systems (some of us a bit too many actually ;) ) Generally these are ttf (true type font ) and otf ( open type fnt ) files which we install in our systems and then just access from various applications. On the other hand when rendering the pages the browsers use woff and woff2 which stand for web open type font format. and some stylesheets linking the styling of the pages elements to the particular woff / woff2 files on the server. So if we want to use some of the fonts we already posess we need to convert them somehow. As I shared before I like using online solutions whenever I can - luckily there is one for converting the fonts too - the Font Squirrel Web Font generator.
https://www.fontsquirrel.com/tools/webfont-generator

It basically works like that - ttf and otf come in from the one side, woff, woff2 and CSS files come out from the other ;)

Let's try it out with rendomly picked up font and see what will happen. I dowloaded the Fintition font from the

http://www.dafont.com/

online library - I'll be using it for personal and non commmercial prpooses like the license file in the archive says ;) - and the file came in ttf format



next I'm going to upload it in the Font Squirrel online tool and check that I'm doing no wrong thick ;) Do note it can process at most 12 fonts at once so if you have more typefaces - like thin, regular, itallic and so on you might need to do this a few times in order to convert them all



Once clicked on the Download Font Kit button I get provided an archive containing the converted woff woff2 fonts, the stilesheet pointing the browser to them and a lot of sample files I don't actually need.


Now let's take a look inside the stylesheet.css file



as we can see it has added the font file name as name of the font and defined the width and style of the font to normal. For now it would be a good idea to change the name to something a bit more friendly - like Finition for example. It does not matter what name exactly you'll define - but do have in mind you'll probably be writing it a couple of times so make it short and meaningful ;)



In this line fo thoughte maybe also renaming the whole folder to smoething like Fonts and the stylesheet to something like fonts.css would also be a good thing to do =)
This is the most basic case possible since we have one single typeface - meaning one font style and one font width - meaning a single typeface. We'll start from here and go in the Mobirise Builder for now and will come back later to explore sime different cases and the ways to handle them. For now we're just inserting one more font into our Mobirise project.

In order to be able to use the fonts we've just created we'll need to reference them into our project. How?
We'll use a trick a fellow forim memebr shared with me once in a while - we'll create a work in progress build dir in which we'll be publishing along the way and place the fonts folder directly inside it referencing it via relative path. This is done for simplcity only - if you prefer you can place it inside your assets folder - won't make any difference - you'll just have to compose the ling from the next step a bit differently. Here is how my example folder looks like - I opened it in browser and navigated to the custom fonts stylesheet we've just created to ba able to just copy / paste the link in the next step. (to do this I just open a an empty tab, type d: inside and click my way down to the location I need)


now it's time to define the path to the stylesheet and place it inside Mobirise Buider's inside head section. In order this to work we need the relative path to the fonts folder - like the highlighted part in the image above and the link will look something like this. Do note the red arrow - it points to the location which we'll be using for the temp dir and which will be actually the root folder for the generated web site

<link rel="stylesheet" href="fonts/fonts.css" type="text/css" charset="utf-8">


And as easy as that we have our custom fonts avaliable ;)

Now it's time to tell the builder some text elements should be using them this is generally done with a siple Custom CSS rule like that - :
h1{
    font-family:"Finition";
    /*replace the font family name between the brackets with the actual name of the font you need the way you have    defined it in the css file */
}
Applying changes you'll see the font you're styling changed but generally - not the way you were expecting it to be. Don't worry - just publish the project in the work in progress directory and it will display beautifully =)



And basically that's it - now all that's left is assigning the custom font we have just created whereever we need it to ;)

So basically this whole drill narrows down to this:

1. Pick up the fonts you want to use in your project;
2. Convert them via the online tool;
3. Edit slightly the generated folder;
4. Place it in a work in progres folder;
5. Define a link and place it inside the head of the project;
6. Assign the fonts to the elements you need and publish to the work in progress folder to preview changes;

And of course - if you're publishing in an additional folder - make sure you've copied the fonts folder there too - that's why I suggested placing it outside the assets directory for better keeping track if it's there or not ;)



So basically this is the way I managed to add a font of my choice to my Mobirise project. Pls do know this example is a bit simplified since font famillies generally come in a few typefaces - like combination between the font family, the width and the font style. In this case when editing the stylesheet you'll just need to edit the generated stylesheet a bit further - like assigning the same friendly family name and altering the width and style values from normal to the appropriate values. A few tips about this:

Thin = font-width: 300;
Regular = font-width: 400;
Semi bold = font-width: 600;
Bold = font-width: 700;
Regular = font-width: 900;
italic = font-style: italic;


Additionally if browsing ove the net you find a font library offering you an embed link - well just paste it in the inside head field - it will work on preview and publish but not in Builder. Do think twice however if the lik provider is thristed enough since each of your visitors will actually have to load the font from there so if the server is for example not accessabe or slow from certain regioins this will also slow down your site.


By the way this approach can also be used for entirely self hosting the fonts your site is using - I mean instead from the google font service our pages can read the fonts from our own servers. You can download all the Google fonts as ttf and otf files from over here:

https://github.com/google/fonts

follow the steps from above to include the ones you need and finally remove the Big G reference links and @ imports from the final version of the build right before uploading it - but this actually is another story - I'll try sharing it in the next few days ;)

Now I do realize this approach is far from prefect since it does not provide a preview in Builder but it works and could provide a temporary sollution in cases when we just need some extra fonts - after all the Builder can't have them all can it? ;)


I would apprechiate any input on the topic, espacially some ideas how to tell the Builder to render te fonts on the preview along with any feedback if and how it worked for you.


Cheers! =)
tut-90.JPG 29.5K
tut-91.JPG 39.6K
tut-92.JPG 101K

Comments

  • Thank's man
  • Glad you've found it useful =)
  • Awesome tutorial, thanks! I appreciate it.

    Google has lots of web fonts, lots to choose from, but just in case you might be interested in using freeware web fonts for a very distinctive logo, I thought I'd mention that my font repository Font-Journal has lots of older freeware fonts that are OK for use as a webfont. I am even working on a few that are OK to use as a web font (whether your site is for personal use, charitable or commercial).

  • Hi @sitepro ,
    glad you've liked it. =)

    Took a look a the Font-Journal site - I love it! No such thing as enough fons I guess ;)
    No matter now many fonts one (or at least I ;) ) have we kind of finally finish searching for more each time. So thank you for sharing this one - I didn't know of its existance so far and sure will take some time to explore it in detail =)

    Cheers! =)
  • Thanks for the info. I love the fonts' site. I am compiling all your tips into a personal folder to go back to when I actually will need to utilize them.
  • Hi @deborahwilliam ,
    Glad you've liked this one useful =)

    I'm also trying to gather some links to useful discussions over here

    http://forums.mobirise.com/discussion/comment/8050/#Comment_8050

    you might want to take a look ;)

    Cheers! =)
  • this is not supposed to be so damn complicated .... look at MS Word, how easy it can be to use your own font
  • anyone else tried it? =)
  • filyov said:

    anyone else tried it? =)

    it works! :+1:
  • if don't have Code Editor extension how to change font?
  • using an external text editor after you published the project (every time when you make any minor changes.....)
    so, the option is to buy the code editor......
  • Did you check the last version? You can add any fonts in it.. google fonts, ttf, otf.. So I don't understand your tricks. Why?
Login or Sign Up to comment.