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!
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 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 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 trying to create my first website and I am experimenting with fonts from fontsquirrel.
The only problem is that I can use only some of the fonts I have downloaded through the site.
I am having a great deal of a problem in particular in writing the CSS code correctly, when the font family includes more than one style.
Lets take for example the LM Mono 10 Regular and Special Elite for example:
My code for special elite is the following and it works great:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'),
url('specialelite.woff2') format('woff2'),
url('specialelite.woff') format('woff'),
url(' specialelite.ttf') format('truetype'),
url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
and
.fifth {font-family: 'specialelite'; font-weight: normal; font-size: 16px; color:black;}
This format is easy to work with because the special elite font-family has only one style.
BUT.. When I am trying to adapt this format on a font-family that has more than one styles like for example the LM Mono 10 family, it simply does not work....
http://www.fontsquirrel.com/fonts/Latin-Modern-Mono
I do not know if the mistake is on the way I am referring to the font family, or if I write the urls wrong... Could you please provide an example of the code in a reply?
Let's say for "Latin Modern Mono Light 10 Regular". How will the font-weight and font-style properties change? I just don't get it...
When I download the resources at the link you provided, it shows each font style as a completely different font family.
This is the Italic version:
#font-face {
font-family: 'latin_modern_mono10_italic';
src: url('lmmono10-italic-webfont.eot');
src: url('lmmono10-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-italic-webfont.woff') format('woff'),
url('lmmono10-italic-webfont.ttf') format('truetype'),
url('lmmono10-italic-webfont.svg#latin_modern_mono10_italic') format('svg');
font-weight: normal;
font-style: normal;
}
This is the Regular version:
#font-face {
font-family: 'latin_modern_mono10_regular';
src: url('lmmono10-regular-webfont.eot');
src: url('lmmono10-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lmmono10-regular-webfont.woff') format('woff'),
url('lmmono10-regular-webfont.ttf') format('truetype'),
url('lmmono10-regular-webfont.svg#latin_modern_mono10_regular') format('svg');
font-weight: normal;
font-style: normal;
}
In order to use these fonts as-is, you will need to specify the appropriate font-family whenever you use them.
For example:
.fifth {
font-family: 'latin_modern_mono10_regular';
font-weight: normal;
...
}
or
.fifth {
font-family: 'latin_modern_mono10_italic';
font-weight: normal;
...
}
For Regular and Italic version:
#font-face {
font-family: 'specialelite';
src: url('specialelite.eot');
src: url('specialelite.eot?#iefix') format('embedded-opentype'), url('specialelite.woff2') format('woff2'), url('specialelite.woff') format('woff'), url(' specialelite.ttf') format('truetype'), url(' specialelite.svg# specialelite') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'specialelite';
src: url('specialelite_italic.eot');
src: url('specialelite_italic.eot?#iefix') format('embedded-opentype'), url('specialelite_italic.woff2') format('woff2'), url('specialelite_italic.woff') format('woff'), url(' specialelite_italic.ttf') format('truetype'), url(' specialelite_italic.svg# specialelite') format('svg');
font-weight: normal;
font-style: italic;
}
Now, you can use this for Regular: font-style: normal
.fifth {font-family: 'specialelite'; font-style: normal; font-size: 16px; color:black;}
OR this for Italic: font-style: italic
.fifth {font-family: 'specialelite'; font-style: italic; font-size: 16px; color:black;}
I have macosx and I made a html signature for mail.app but when I send email and someone pick it with windows property font-family does not work.
When I send from MAC to MAC everything is okey.
Here are my styles:
#font-face {
font-family: 'open_sansitalic';
src: url('opensans-italic-webfont.eot');
}
#font-face {
font-family: 'open_sansitalic';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanssemibold';
src: url('opensans-semibold-webfont.eot');
}
#font-face {
font-family: 'open_sanssemibold';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-semibold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont.eot');
}
#font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.eot');
}
#font-face {
font-family: 'open_sansregular';
src: url(data:application/x-font-woff;charset=utf-8;base64,...) format('woff'),
url('opensans-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
And also this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'>
You must give absolute url
url('opensans-italic-webfont.ttf') format('truetype');
src: url('opensans-semibold-webfont.eot');
Note1: Maybe it´s a good ideia to put the fonts in a remote server or use CDN
Note2: It only works on Apple Mail and iPhone