OJS (Open Journal Systems) is a widely-used open-source platform for managing and publishing scholarly journals. One of the benefits of using OJS is the ability to customize the look and feel of your journal’s website by editing the CSS of your chosen theme. Changing the font of your website is a common customization that can help enhance the readability and overall aesthetic appeal of your journal. In this guide, we’ll walk you through the steps to change the font in OJS.
To change the font in OJS (Open Journal Systems), you will need to edit the CSS (Cascading Style Sheets) of your OJS theme. Here are the steps to follow:
Back up your previously uploaded CSS before making any modifications. We do not take any responsibility if the article causes any change to your theme
1. Log in to your OJS website as an administrator and go to the “Settings” menu.
Click on the “Website” tab and then select “Appearance“.
2. On the Appearance page, Click Advanced
In the Theme Settings page, you’ll see a section called “Custom CSS“. Click on the “Edit” button next to it.
In the Custom CSS editor, you can add CSS code to change the font. For example, to change the font to Arial, you can add the following code:
body {
font-family: Arial, sans-serif;
}
3. Once you’ve added the CSS code, click on the “Save” button to save your changes.
Note that you can modify other CSS properties such as font-size, font-weight, and font-style, to name a few. However, make sure to test your changes before publishing them to ensure that they don’t negatively impact the readability or accessibility of your website.
There are some commonly used fonts that are widely available on most platforms and can be applied with the CSS code such as:
- Arial
- Helvetica
- Times New Roman
- Georgia
- Verdana
- Tahoma
These fonts are considered web-safe fonts, meaning they are likely to be available on most computers and devices and are designed for optimal legibility on screens.
Using Google Font #
If you want to use the font that is provided as default in most browsers as we have listed above, you can use the Google Font.
To add a Google font to your CSS, you can follow these steps:
1. Go to the Google Fonts website at https://fonts.google.com/ and browse the available fonts. Once you’ve found a font you like, click on the “One of the font” .
2. Once you’ve selected all the fonts you want to use, scroll down then you click this click on the “Select” button at right side of preview. Then click the top right cornered button to get the CSS code.
3. You will the sidebar and some code that can be used in your CSS code.
After that you need to add the code for your existing CSS file or new CSS file, for example :
@import url('https://fonts.googleapis.com/css2?family=Golos+Text&family=Montserrat:wght@100&display=swap');
body {
font-family: 'Golos Text', sans-serif;
}
/* The rest of your code below of this line */Upload the file to your OJS.
If you want to see some changes, you need to clear your browser cache.
Local Font #
If you want to use the local font, which means that the font is not available on Google Fonts here is how you can do it :
1. After you have downloaded the font, you need to upload the font to your server. Place the font in the public folder for your OJS.
2. Create a script like this for your CSS (for example for the below script we add the Rubik font from here)
@import url('https://yourOJSDOMAIN.com/public/rubik.ttf');
body {
font-family: 'Rubik Light', sans-serif;
}
/* The rest of your code below of this line */Upload the CSS to your OJS, clear your browser cache and the font will be changed based on the CSS code.
If you need to change the font based on the header only you can add the script to the CSS, for example, we want to change the font for the header only.
h1,h2,h3,h4,h5,h6 {
font-family: 'Verdana', sans-serif;
}
/* The rest of your code below of this line */Don’t forget to clear your browser and OJS cache if you do not find any change in the appearance of your frontend appearance.
Google Font or Local font which should you use? #
Before deciding which way you choose to select the source of the font in your OJS here is some consideration.
There are several advantages to using Google font over local font :
- Variety: Google Fonts provides a vast library of fonts to choose from, which allows for greater variety and customization options than local fonts.
- Accessibility: Google Fonts are web-based and hosted on Google’s servers, which makes them more accessible to users regardless of the platform, device or browser they are using.
- Optimization: Google Fonts are optimized for the web, which means they load quickly and efficiently, making your website more user-friendly.
- Compatibility: Google Fonts are designed to be compatible with most modern browsers and devices, which means you can be confident that your chosen font will display correctly across different platforms.
- Updates: Google Fonts are regularly updated and improved by their creators, which means you can benefit from the latest developments in typography without having to manually update your local font files.
On the other hand, using local fonts can offer some advantages such as:
- Privacy: If you have specific branding guidelines or licensing requirements that require the use of a particular font, using a local font can be a more secure and private option.
- Customization: With a local font, you have the option to customize and tweak the font files to suit your needs, which may not be possible with Google Fonts.
Ultimately, the decision to use Google Fonts or local fonts depends on your specific needs and preferences. However, given the advantages of Google Fonts outlined above, they are often a popular choice for many web designers and developers.
Other resources for font #
Here are some sites that provide CDN-free fonts online for commercial use:
- Google Fonts (https://fonts.google.com/) – This is a popular library of open-source fonts that you can use on any website or project, including commercial use. You can easily integrate these fonts into your website using a simple HTML link.
- Font Squirrel (https://www.fontsquirrel.com/) – This site provides a large selection of high-quality fonts that are free for commercial use. The fonts on Font Squirrel are carefully screened for quality and compatibility with different platforms.
- FontSpace (https://www.fontspace.com/) – FontSpace offers a collection of over 72,000 fonts that you can download and use for free, including for commercial use. The site also provides a range of tools to help you find the right font for your project.
- Font Library (https://fontlibrary.org/) – Font Library is a collection of high-quality, open-source fonts that you can use for any project, including commercial use. The fonts on this site are licensed under the SIL Open Font License.
It’s important to check the licensing terms for any font you plan to use in a commercial project. Some fonts may have restrictions on commercial use or require attribution or payment of a fee.
Conclusion #
In conclusion, using custom fonts in OJS can be a great way to enhance the readability and visual appeal of your journal’s website. With the steps outlined in this article, you should be able to easily add custom fonts to your OJS theme using either the Google Fonts API or by uploading your own font files. However, it’s important to keep in mind that typography can have a significant impact on the user experience, so be sure to choose fonts that are easy to read and appropriate for the content of your journal. By following these guidelines, you can create a visually engaging and professional-looking website for your journal. Need more articles about uploading and creating CSS for your OJS, you can read them here.
