Font & Images for Websites
When a new site is created, you can utilize different fonts and images to help give a unique look to a webpage.
Users are able to manage the available fonts for use on the site. When you add and enable new types of fonts, additional options appear within the style font-families.
-
Select the standard image under the Fonts header which will pull up all available Sans-Serif and Serif type fonts.
-
Select the fonts to be made available to use from the Fonts menu within Style.
Note: Active fonts will have a green check mark next to them.
-
To deactivate a font, simply uncheck the green mark.
-
Select Save & close to keep your changes or Cancel to discard any changes you have made.
-
Select the Google image under the Fonts header.
-
A set of instructions will appear to help guide you through the process of how to add Google Fonts.
-
Visit Google web fonts and select the fonts you would like to use.
-
Once you have selected your fonts, expand the family selected section and grab the embed and CSS code.
-
Paste that information into "Add this code to your website" and paste the link into the text field back in the Google Fonts modal window.
Note: Make sure to remove the "s" from HTTP in the link provided as an error may appear when the font is added.
-
At this point, Font labels can be modified. It is strongly recommended that the CSS is copied for each font from Google to set fallback fonts just in case.
-
-
Select Save & close to keep your changes or Cancel to discard any changes you have made.
Images can also be added and managed from this page as well, with all available images displayed in a list that includes a thumbnail of the image, the name of the image, the file name, and when it was last modified.
Users with the appropriate roles are also able to update the image name or delete an image.
-
Select + Add images in the Images section.
-
A new modal window will appear.
-
Add a name for the image.
-
Either drag and drop the image onto the dotted line area or select the button to manually select a file from your computer.
Tip: Consider upload images that are formatted as Scalable Vector Graphics (.svg) file types for your public facing school website. This file format ensures that your images can be re-sized with a high quality resolution. Your images will remain sharp at any scale without becoming blurry or pixelated.
-
If you wish to add another image, select Save & add another. Otherwise, either select Cancel to discard any changes or Save & close to keep the changes.
Note: If the + Add images is missing, navigate to Styles , Edit a style. After selecting the main space, a new panel should appear on the left side where the Background Image option resides allowing the addition of new images.