#font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBook.ttf') format('truetype'),
url('../../assets/fonts/gothambook-webfont.woff') format('woff'),
url('../../assets/fonts/gothambook-webfont.woff2') format('woff2');
font-weight: 400;
}
#font-face {
font-family: 'Gotham';
src: url('../../assets/fonts/GothamBold.ttf') format('truetype'),
url('../../assets/fonts/gothambold-webfont.woff') format('woff'),
url('../../assets/fonts/gothambold-webfont.woff2') format('woff2');
font-weight: 700;
}
body {
font-size: 1.6rem;
font-family: 'Gotham', 'Arial', 'Helvetica', sans-serif;
}
See above css. This works fine on Chrome, Firefox and Edge. But in Safari the text sometimes simply doesn't show. So it doesn't even go to the fallback, it just doesn't show.
This seems to be especially the case when the text is dynamically inserted with JavaScript. I can see the text in the inspector but not in the viewport. It always shows up when using:
font-family: 'Helvetica', sans-serif;
Any ideas?
Perhaps your Safari version does not support the fonts, maybe you can change into another one.
E.g.:
font-family: "Georgia", "Times New Roman", //[...]
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!
I put below code into style.css and called style.css from the header.php.
#font-face {
font-family: 'Noto Sans JP';
font-weight: 700;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Bold.otf') format('opentype');
}
#font-face {
font-family: 'Noto Sans JP';
font-weight: 400;
font-style:normal;
font-display: swap;
src: local('Noto Sans JP'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff2') format('woff2'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.woff') format('woff'),
url('https://ja.seoartgallery.com/NotoSansJP/NotoSansJP-Regular.otf') format('opentype');
}
And I set the font as below, but when I test it with Chrome developer tools, both desktop and mobile web fonts are loaded.
* {
font-family: Noto Sans JP, sans-serif;
}
#media (max-width: 549px){
*{
font-family: 'ヒラギノ角ゴ ProN' , sans-serif !important;
}
}
How to load web fonts only on desktop?
I would like to ask for advice. thank you.
I've been having trouble for some time with Century Gothic on my website. It seems like when the font-weight is bold, there is no difference between an l and an i character (check the images).
how it looks
how it should look like
It is happening with all browsers (including Chrome and Firefox), and I am importing the font like so, for all of the different styles and weights with different files. Bold is like so:
#font-face {
font-family: 'CenturyGothicStd';
src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot');
src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
url('./fonts/CenturyGothicStd/3099F9_2_0.woff2') format('woff2'),
url('./fonts/CenturyGothicStd/3099F9_2_0.woff') format('woff'),
url('./fonts/CenturyGothicStd/3099F9_2_0.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
and calling it on the body like so:
body {
font-family: CenturyGothicStd, "Century Gothic", CenturyGothic, AppleGothic, "Glyphicons Halflings", sans-serif;
}
I don't understand if the problem rellies on my website or on the font.
What could be triggering this issue?
I'm assuming you will need to add another font with the font facing looking something like this:
#font-face {
font-family: 'CenturyGothic';
src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot');
src: url('./fonts/CenturyGothicStd/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
url('./fonts/CenturyGothicStd/3099F9_2_0.woff2') format('woff2'),
url('./fonts/CenturyGothicStd/3099F9_2_0.woff') format('woff'),
url('./fonts/CenturyGothicStd/3099F9_2_0.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'CenturyGothicBold';
src: url('./fonts/CenturyGothicBold/3099F9_2_0.eot');
src: url('./fonts/CenturyGothicBold/3099F9_2_0.eot?#iefix') format('embedded-opentype'),
url('./fonts/CenturyGothicBold/3099F9_2_0.woff2') format('woff2'),
url('./fonts/CenturyGothicBold/3099F9_2_0.woff') format('woff'),
url('./fonts/CenturyGothicBold/3099F9_2_0.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
I am facing a problem of brandley handwritten font ,
its look perfect in safari but there is a problem in both the giant browser so called mozilla and chrome .
Here's the code .
#font-face {
font-family: "BradleyHandITCBold";
src: url(BradleyHandITCBold.ttf);
}
.newfont
{
font-family: 'BradleyHandITCBold';
}
Solutions:
There is only problem in mozilla and chrome because its modern browser and does not supports ttf font , so there is need to convert TTF to WOFF or WOFF2.
I converted it using TTF to WOFF Converter and its worked perfectly .
Here is the solved code .
#font-face {
font-family: 'BradleyHandITCBold';
src: url("css/BradleyHandITCBold.ttf") format('truetype');
src: url("css/BradleyHandITCBold.woff") format('woff');
}
.newfont
{ font-family: 'BradleyHandITCBold' !important;
font-size : 31px;
}
i am posting Here to help out other developer in future .
thanks for your comment #t.niese
also really nice is it to have different font-weights for your fonts:
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-regular-webfont.eot");
src: local('?'), url("/media/fonts/din-regular-webfont.woff") format('woff'), url("/media/fonts/din-regular-webfont.ttf") format('truetype'), url("/media/fonts/din-regular-webfont.svg#webfontfLFgafto") format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: "DIN";
src: url("/media/fonts/din-bold-webfont.eot");
src: local('?'), url("/media/fonts/din-bold-webfont.woff") format('woff'), url("/media/fonts/din-bold-webfont.ttf") format('truetype'), url("/media/fonts/din-bold-webfont.svg#webfontfLFgafto") format('svg');
font-weight: bold;
font-style: normal;
}
and use it like this:
.bold-text {
font-family: 'DIN', sans-serif;
font-weight: bold;
}
.regular-text {
font-family: 'DIN', sans-serif;
}