[For 1.8] [Tutorial] - How to take external linked theme files like FA and include them locally
#1
Information 
Greetings, well, if you are like me and spend alot of time offline on a localhost things like included fonts for example fontawesome will not load..., to correct this I simply include those locally. I won't get into every font included externally in many themes and how to include them locally but let us focus on the most important, font awesome. If you want to see what I mean look at the most themes that have external fonts or other files and the font or other external linked reliant elements do not display correctly because without internet or say even when there are complivations with the externally linked site, thee fonts or other elements reliant on external file linkage cannot load..., but by adding external files internally allows one to see it loading as you can see and that is because it is locally hosted in the theme....., hopefully that makes sense and you understand why it is a better practice to include the files rather than externally link them and I still cannot understand why so many of the themes for mybb do not follow that most simply concept.


Anyhoo, below is a simply way to include font-awesome in your theme locally and once you have figured that out..., including other fonts locally will make alot more sense hopefully....

NOTE: in the examples I use "yourthemefoldername" that would need to be changed to the folder name that goes with your theme

In headerinclude find:


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

Comment it out and add to look like this:

<!-- FontAwesome -->
<link rel="stylesheet" href="{$mybb->asset_url}/images/yourthemefoldername/fontawesome5/css/all.css">
<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> -->
* You can download Fontawesome5 pkg stripped down for size to be used for theme includes here:

http://s000.tinyupload.com/index.php?fil...7200671326


then you would simply extract and take the "fontawesome5" folder and place inside the images/youthemefoldernamd folder and bam you have local font-awesome included in the theme.


ok, we will look at one other font even though there are a handful of externally link font files in many themes, perhaps showing you how to do one will give a better idea how to do the rest:

in header comment out and modify like so:


<link href="{$mybb->asset_url}/images/yourthemefoldername/inc/css/opensans.css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">-->


Download open sans for theme include:

http://s000.tinyupload.com/index.php?fil...8990668717

then download and extract the inc.zip so that you have a folder called "inc" and take that folder "inc" and place it inside images/yourthemefoldername and bam, now you have included your first font other than font-awesome locally rather than externally.


Hopefully some of that information may be of interest and helpful. Happy editing! Cool
Reply
#2
Ok just like before ok, we will look at some other fonts often included externally in themes even though there are a handful of externally link font files in many themes, perhaps showing you how to do just some of these will give a better idea how to do the rest:

NOTE: just like previously in the examples I use "yourthemefoldername" that would need to be changed to the folder name that goes with your theme

in header comment out and modify like so:



<!--<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/lobster.css?family=Lobster' rel='stylesheet' type='text/css'>

<!--<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/lobstertwo.css?family=Lobster+Two' rel='stylesheet' type='text/css'>

<!--<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/sourcesanspro.css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

<link href="{$mybb->asset_url}/images/yourthemefoldername/inc/css/opensans.css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
<!--<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">-->

<!--<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/raleway.css?family=Raleway' rel='stylesheet' type='text/css'>

<!--<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/notosans.css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>

<!--<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>-->
<link href='{$mybb->asset_url}/images/yourthemefoldername/inc/css/roboto.css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>


Download these fonts for theme include:

[attachment=42520]

or:

http://s000.tinyupload.com/index.php?fil...8997576614

then download and extract the inc.zip so that you have a folder called "inc" and take that folder "inc" and place it inside images/yourthemefoldername and bam, now you have included your more other fonts other than font-awesome locally rather than externally.


Hopefully some of that information may be of interest and helpful. Happy editing! Cool
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)