This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 0 - Pages: 1 Threads: [ Previous | Next ]
AndreWolff

Posts: 1,715
Registered: 14-Dec-2007
Web fonts in the FancyBox, PhotoSwipe and Slide Show 4 skins
Posted: 24-Sep-2019 18:53
 
  Click to reply to this thread Reply
The Web Open Font Format thread explains the advantages of web fonts.

It has much in common with Google Fonts, which are implemented in my Slide Show 4 skin, my PhotoSwipe skin and my FancyBox skin, but the fonts files are on a CDN and not on the server where the album is hosted.
The required woff files can be downloaded from several sites on the Internet.

The next recipe makes it possible to use these woff files in my skins.

If the image directory contains no 'res' folder, create a 'res' folder in the image directory.
Copy the downloaded woff file(s) (for instance file OpenSans-Regular-webfont.woff used in the code below) to this res directory.

This file will in a future version of jAlbum be copied to the res folder in the output directory if you make the album, as David Ekholm did promise here. In jAlbum version 18.4 and earlier versions, you have to add next code in file filetypes.xml in the jAlbum program system folder:
<type name="Web font" mimeType="">
	<ext>woff</ext>
</type>
Enter in the css code box on the 'Web page' tab:
@font-face {
    font-family: "OpenSans-BoldItalic-webfont";
    src: url("OpenSans-BoldItalic-webfont.woff") format("woff");
}
 
@font-face {
    font-family: "OpenSans-Regular-webfont";
    src: url("OpenSans-Regular-webfont.woff") format("woff");
}
 
body {
	font-family: “OpenSans-Regular-webfont”, Geneva, Tahoma, sans-serif;
}
 
h1, h2, h3 {
	font-family: "OpenSans-BoldItalic-webfont", Geneva, Tahoma, sans-serif;
}
The first 2 statements define the web fonts to be used and the third css statement is required to apply it to all text and the 4th css statement to apply it to the title. Note that the body css statement should be inserted before the h1 css code.

You should delete the second and third statement if it should only be used for the title.

Let me know if you think that web fonts should be implemented in my skins.
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums