so for my Sky Web EPG, I want to turn off anti-aliasing on the <li> element so that it shows like the original Sky EPG: Original Sky EPG
Here is how I add the font in the CSS:
/* Font Families */
#font-face {
font-family: 'Zurich';
src: url('Zurich Bold Extended.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'ZurichTV';
src: url('Zurich Bold Condensed.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Related
I am using pagedjs to render a pdf and using their starter kit: https://gitlab.coko.foundation/pagedjs/starter-kits/book-spread_esm
When I export a pdf via the page print function, the text is selectable as you would expect.
But when I change the font, the text is not selectable.
In other examples, they have changed the font and the pdf has rendered properly (text is selectable) example: https://gitlab.coko.foundation/pagedjs/starter-kits/book_avanced-interface
So I know this must be possible.
What I have tried
I initially imported the fonts from Google Fonts as follows:
Style.css:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,300;0,400;0,500;0,600;1,100;1,300;1,400;1,500;1,600&display=swap');
body{
font-family: 'Montserrat', 'sans-serif';
}
...
The fonts render correctly, but text is not selectable.
Next, I looked at the advanced example with fonts and saw that they defined local fonts as follows:
Inside: /fonts/VG5000/stylesheet.css:
#font-face {
font-family: 'VG5000';
src: url('VG5000-Regular_web.eot');
src: url('VG5000-Regular_web.eot?#iefix') format('embedded-opentype'),
url('VG5000-Regular_web.woff') format('woff'),
url('VG5000-Regular_web.woff2') format('woff2'),
url('VG5000-Regular_web.ttf') format('truetype'),
url('VG5000-Regular_web.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
}
Then it is used in /style-print.css as:
h1{
font-family: 'VG5000';
text-align: center;
}
So I mimicked this with my fonts (albeit a bit more complicated):
File structure in /fonts/Montserrat/:
static/
\_Montserrat-Black.ttf
\_Montserrat-BlackItalic.ttf
\_Montserrat-Bold.ttf
\_Montserrat-BoldItalic.ttf
\_Montserrat-ExtraBold.ttf
\_Montserrat-ExtraBoldItalic.ttf
\_Montserrat-ExtraLight.ttf
\_Montserrat-ExtraLightItalic.ttf
\_Montserrat-Italic.ttf
\_Montserrat-Light.ttf
\_Montserrat-LightItalic.ttf
\_Montserrat-Medium.ttf
\_Montserrat-MediumItalic.ttf
\_Montserrat-Regular.ttf
\_Montserrat-SemiBold.ttf
\_Montserrat-SemiBoldItalic.ttf
\_Montserrat-Thin.ttf
\_Montserrat-ThinItalic.ttf
Montserrat-Italic-VariableFont_wght.ttf
Montserrat-VariableFont_wght.ttf
stylesheet.css
Inside /fonts/Montserrat/stylesheet.css:
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: 'Montserrat';
src: url('static/Montserrat-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
This renders properly on the website, but on PDF the font does not load:
Web rendering:
PDF rendering:
It is the same as before, text is not selectable.
The final thing I have tried is looking in the docs, specifically searching font site:pagedjs.org, but there is nothing specific in the documentation about fonts and editable pdfs.
I have a question regarding the CervoNeue font.
For some reason when the font looks like this on a website (as you can see there are some letters that look weird, and this only happens if the screen size is over 1024px):
I tried the font locally and it looks like it should.
I tried declaring it in multiple ways:
a)
#font-face {
font-family: "CervoNeue-Light";
font-style: normal;
font-weight: 300;
src: url('../fonts/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/CervoNeueLightNeue.woff') format('woff');
}
#font-face {
font-family: "CervoNeue-Regular";
font-style: normal;
font-weight: 400;
src: url('../fonts/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/CervoNeueRegularNeue.woff') format('woff');
}
b)
/* CervoNeue Light */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeue.woff') format('woff');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueLightNeueItalic.woff') format('woff');
font-weight: 300;
font-style: italic;
}
/* CervoNeue Regular */
#font-face {
font-family: "CervoNeue";
src: url('../fonts/cervo-neue/CervoNeueRegularNeue.woff2') format('woff2'), url('../fonts/cervo-neue/CervoNeueRegularNeue.woff') format('woff');
font-weight: 400;
font-style: normal;
}
I also noticed something odd in the Network tab:
The preview of the font is weird, compared to how it should look. Locally, the preview is just not available.
The font-face declarations also seem to appear as they should inside the final css file.
Any help would be appreciated, thanks!
What's the proper way to define #font-face declarations for Amstelvar italic (variable) font?
Here are the font faces declarations I used:
#font-face {
font-family: 'Amstelvar';
font-weight: 100 900;
font-display: swap;
font-style: normal;
src: url('amstelvar-roman.woff2') format('woff2-variations'),
url('amstelvar-roman.woff2') format('woff2');
}
#font-face {
font-family: 'Amstelvar';
font-weight: 100 900;
font-display: swap;
font-style: oblique 0deg 10deg;
src: url('amstelvar-italic.woff2') format('woff2-variations'),
url('amstelvar-italic.woff2') format('woff2');
}
Add this is the class I apply to the italic text:
.italic {
font-style: italic,
#supports (font-variation-settings: normal): {
font-variation-settings: 'slnt' -10,
font-style: oblique 10deg,
}
}
Here is the live example.
The word italic has to be italicized in "Test Page with italics and bold" header, but unfortunately, it doesn't have any effect.
Posted this on twitter but figured I'd add it here too:
Found a few things: the subsets of Amstelvar lost their variation axes so aren't behaving properly. Also: it has an italic axis & not slant, & since roman/italic are separate files, you can just use family grouping & font-style: italic Have a look: https://codepen.io/jpamental/pen/wvKdmPp
#font-face {
font-family: 'Amstelvar';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Roman.woff2) format('woff2');
}
#font-face {
font-family: 'Amstelvar';
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2),
url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/Amstelvar-Italic.woff2) format('woff2');
}
em {
font-style: italic;
}
I am completely new to website design and programming. I have created a website on Mobirise, and am storing it on Github. I am looking to change the font across the website, as I no longer like the one that I had chosen on Mobirise when I exported it to Github.
I have uploaded the font files that I would need to use to the /OpenSansFonts folder in my repository at: https://github.com/SkyBetChampionship/Sky-Bet-Championship/tree/gh-pages.
Would anybody please be able to advise me what to do next to change the font across my website?
Thank you in advance,
Adam
You can create separate *.css file with this code, or add this code in your assets/mobirise/css/mbr-additional.css (if you create separate file, don't forget import this file in your home.html.
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-Light';
src: url('/OpenSansFonts/OpenSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-RegularItalic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
#font-face {
font-family: 'OpenSans-Semibold';
src: url('/OpenSansFonts/OpenSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
#font-face {
font-family: 'OpenSans-SemiBold';
src: url('/OpenSansFonts/OpenSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
#font-face {
font-family: 'OpenSans';
src: url('/OpenSansFonts/OpenSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
For change font across web site, add to body in assets/mobirise/css/mbr-additional.css font-family property.
body {
font-family: 'OpenSans';
font-weight: 400;
font-style: normal;
line-height: 1.5;
}
For import separate css file with fonts, add in your home.html around 42 string this code:
<link rel="stylesheet" href="your_path_to_file/file_with_fonts.css" type="text/css">
When you want another style of font, use font-family, font-weight and font-style properties.
Feel free ask other questions :) Hope this will help you
I've css for Custom Arial font face for regular, bold, italic and bold-italic style.
And for that all different font files are created arial_mt_stdregular, arial_mt_stdbold, arial_mt_stditalic and arial_mt_stdbold_italic
#span{
font-family: 'arial_mt_stditalic';
font-style: italic;
font-size: 30px;
}
In Firefox, this apply italic style twice as Chrome and IE.
So my content looks twice italic and twice bold in FireFox than Chrome and IE.
#font-face {
font-family: 'arial_mt_stdregular';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stditalic';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold_italic';
src: url('arialmtstd-bolditalic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
sample from FF and Chrome
Why Chrome and IE not applied font-style:italic for "arial_mt_stditalic" font?
I suspect this is browsers trying to simulate italics when you've provided an italic font but told the browser it isn't italic.
When applying the font you have:
font-family: 'arial_mt_stditalic';
font-style: italic;
But in the single #font-face for rial_mt_stditalic you have
font-style: normal;
Ie. you have told the browser to use a non-italic typeface as italic.
All the #font-face definitions should have the same value for font-family, and the other properties then tell the browser what variant, weight, etc. that particular download is.
When you use that font-family the browser matches on the other properties to select the download.
Ie. you should have:
#span{
font-family: 'arial mt';
font-style: italic;
font-size: 30px;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
// etc.