I recently uploaded my code to bluhost, to create my portfolio website. However, while the fonts were appearing on my computer, they do not display when I load the website (through the host bluehost).
Here is my CSS code. Is the problem trough CSS or bluehost?
#font-face {
font-family: playfair-italic;
src: url(fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(fonts/open-sans/OpenSans-Semibold.ttf);
}
Try to add './' before each url to convert them to relative paths.
#font-face {
font-family: playfair-italic;
src: url(./fonts/playfair-display/PlayfairDisplay-Italic.otf);
}
#font-face {
font-family: playfair-regular;
src: url(./fonts/playfair-display/PlayfairDisplay-Regular.otf);
}
#font-face {
font-family: playfair-sc;
src: url(./fonts/playfair-display/PlayfairDisplaySC-Regular.otf);
}
#font-face {
font-family: opensans-regular;
src: url(./fonts/open-sans/OpenSans-Regular.ttf);
}
#font-face {
font-family: opensans-semibolditalic;
src: url(./fonts/open-sans/OpenSans-SemiboldItalic.ttf);
}
#font-face {
font-family: opensans-semibold;
src: url(./fonts/open-sans/OpenSans-Semibold.ttf);
}
Since these are both Google Fonts you probably want to use a script tag to pull the font files in from Google's CDN instead of embedding them into the project and serving them from your site.
In the <head> of your HTML file add this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,600i|Playfair+Display+SC|Playfair+Display:400,400i" rel="stylesheet">
And to use the fonts in your CSS files, use these rules:
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
font-family: 'Playfair Display SC', serif;
//font-weight and font-style will define the rest
font-weight: 400; // This is the regular weight
font-weight: 600; // This is the bold weight
font-style: italic; // The default is regular
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'm not sure what I'm doing wrong here? I'm trying to create a bold variant of my regular font, but it seems to always just use the last defined font-face in the matching font family. Any ideas?
<style>
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold"; }
#font-face {
font-family: ProofMedium2;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
body{
font-family:ProofMedium, san-serif;
}
.test{
font-family:ProofMedium2, san-serif;
}
</style>
<body>
testing <b>testing</b> <span class="test">testing</span>
</body>
Edit: I'm using chrome
Please remove inline style from div font-weight:normal;.
<style>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: "normal"; }
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold"; }
body{
font-family:"ProofMedium", san-serif;
}
</style>
<div>testing</div>
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
#font-face {
font-family: ProofMedium;
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
#font-face {
font-family: ProofMedium2;
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
}
body {
font-family: ProofMedium, san-serif;
}
.test {
font-family: ProofMedium2, san-serif;
font-weight: bold;
}
testing <b>testing</b> <span class="test">testing</span>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium-1";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf")format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium-2";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
body {font-family: "ProofMedium", san-serif;}
p.ProofMedium-1{font-family: "ProofMedium-1";}
p.ProofMedium-2{font-family: "ProofMedium-2";}
<p class="ProofMedium-1">i am ProofMedium-1</p>
<p class="ProofMedium-1">i am ProofMedium-2</p>
use above like diffrent font family names
In CSS have the highest precedence over internal and external CSS. What you define as inline CSS will not be overwritten by any external or internal CSS. Since you mentioned font-weight: normal, that is only being executed. So it should work if you remove it.
Bonus: Do not mix things up. If you are using external/internal CSS follow that standard only. Mixing them with inline CSS will only create confusion.
In CSS, if there are multiple definitions of #font-face the last definition will be executed and will overwrite the previous definitions.
Go through specificity in css
<style> #font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: "normal";
}
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: "bold";
}
body {
font-family: "ProofMedium", san-serif;
}
</style>
<div>testing</div>
Please try the following:
<style>
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofMedium/ProofMedium-Regular.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
#font-face {
font-family: "ProofMedium";
src: url("/fonts/ProofBold/ProofBold-Regular.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
body {
font-family: "ProofMedium", san-serif;
}
.font_medium {
font-weight: 500;
}
.font_bold {
font-weight: 700;
}
</style>
<p class="font_medium">text</p>
<p class="font_bold">text</p>
I fixed the issue by changing,
font-weight: "bold";
to
font-weight: bold;
I'm surprised the quotation marks matter, but apparently they do.
I have the following font files:
Raleway-Bold.ttf
Raleway-ExtraBold.ttf
Raleway-ExtraLight.ttf
Raleway-Heavy.ttf
Raleway-Light.ttf
Raleway-Medium.ttf
Raleway-Regular.ttf
Raleway-SemiBold.ttf
Raleway-Thin.ttf
Now i have implemented them in my css like follow:
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
.bold
{
font-family: "Raleway-bold"; !important;
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
.extraBold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraBold.ttf');
}
.extraLight
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-ExtraLight.ttf');
}
.heavy
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Heavy.ttf');
}
.light
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Light.ttf');
}
.medium
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Medium.ttf');
}
.thin
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-Thin.ttf');
}
.semi_bold
{
font-family: "Raleway"; !important;
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
However when i change the class to semi_bold for example nothing changes? so am i implementing them in a wrong way or am i missing something?
Note That the first raleway the font-face works fine but it is the rest that doesnt seem to make any changes to my text
You need to define all of your custom fonts in #font-face blocks. Only then can you use them in normal styles. Here you have defined Raleway only, so those classes which use it (all except .bold) will use Raleway-Regular.ttf.
#font-face {
font-family: 'Raleway';
src: url('/site/resources/fonts/Raleway-Regular.ttf');
}
#font-face {
font-family: 'Raleway-bold';
src: url('/site/resources/fonts/Raleway-Bold.ttf');
}
#font-face {
font-family: 'Raleway-semibold';
src: url('/site/resources/fonts/Raleway-SemiBold.ttf');
}
...
.normal {
font-family: 'Raleway';
}
.bold {
font-family: 'Raleway-bold';
}
...
Note that you need to define somewhere that ordinary text should use font-family: 'Raleway';.
You need to declare each typeface (here, each font weight) in a #font-face rule of its own. You should also use different font formats to cover all browsers. For a simple example for the former principle, see font-face weight and for the latter, use e.g. the FontSquirrel generator.
It is known that from the following urls that wkhtmltopdf use only ttf format fonts.
use custom fonts with wkhtmltopdf
Google Web Fonts and PDF generation from HTML with wkhtmltopdf
My website uses only woff, so because of that I am using user-style-sheet to add ttf fonts. I am using many google fonts like Oxygen, Inconsolata, Open Sans, merriweather etc. by using the same font-family name in the user-style-sheet and its rendering correctly.
But the problem is with the fonts 'Open Sans Condensed' and 'sorts mill goudy'. When I am trying to change the font-family name with something else, its properly rendering not exactly with the same name.
I want to use the same names and don't want to change the variable name because I want to use the webfonts and not local fonts.
Second thing is that I don't want to download the fonts to my system and use it but only webfonts.
The way I am using userstylesheet is like this
#font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/829b7e77062a1a06dfc90c29f0f413e2a1de44fe/inconsolata/Inconsolata.ttf') format('truetype');
}
#font-face {
font-family: "sorts mill goudy";
font-style: normal;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');
/*
src: url('https://bienvenidod-fonts.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Regular.ttf') format('truetype');*/
}
#font-face {
font-family: 'Sorts Mill Goudy';
font-style: italic;
font-weight: 400;
src: url('https://googlefontdirectory.googlecode.com/hg-history/73427626e72275f857e7fdfd29e0a5c52516fed5/sortsmillgoudy/SortsMillGoudy-Italic.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 300;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Light.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 400;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Regular.ttf') format('truetype');
}
#font-face {
font-family: 'Merriweather';
font-style: normal;
font-weight: 700;
src: url('https://jenniferespencer-webfont.googlecode.com/hg-history/0ab6594f99d5904bb834e02e43d1d536c87f8622/merriweather/Merriweather-Bold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 400;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLight.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: bold;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondBold.ttf') format('truetype');
}
#font-face {
font-family: 'Open Sans Condensed';
font-style: italic;
font-weight: 300;
src: url('http://testinghtmltopdf.site40.net/fonts/OpenSans-CondLightItalic.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 400;
font-style: normal;
src:url('http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: normal;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 700;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf') format('truetype');
}
#font-face {
font-family: "open sans";
font-weight: 800;
font-style: italic;
src: url('http://themes.googleusercontent.com/static/fonts/opensans/v7/PRmiXeptR36kaC0GEAetxlDMrAYtoOisqqMDW9M_Mqc.ttf') format('truetype');
}
And following is the way I am using the source code in the website
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
#import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic);
#import url(http://fonts.googleapis.com/css?family=Philosopher:400,700,400italic,700italic|Droid+Sans+Mono|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic|EB+Garamond);
#import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
#import url(http://fonts.googleapis.com/css?family=Dancing+Script:400,700);
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700&subset=latin,latin-ext);
#import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic);
#import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic);
#import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
When I am trying to change the font-family name from 'sorts mill goudy' to 'sorts mill goudyy' in the both user-style-sheet and source code..its rendering correctly. What can be problem with the same font-family name?
You can try to use the latest version (0.12) which has support for WOFF fonts.
How can I use more than #font-face rule in my CSS?
I've inserted this into my stylesheet:
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
This currently only applies for the whole body of text on the site. But, I would like to specify h1 to use a different font. How can I do this?
Note, you may also be interested in:
Custom web font not working in IE9
Which includes a more descriptive breakdown of the CSS you see below (and explains the tweaks that make it work better on IE6-9).
#font-face {
font-family: 'Bumble Bee';
src: url('bumblebee-webfont.eot');
src: local('☺'),
url('bumblebee-webfont.woff') format('woff'),
url('bumblebee-webfont.ttf') format('truetype'),
url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}
#font-face {
font-family: 'GestaReFogular';
src: url('gestareg-webfont.eot');
src: local('☺'),
url('gestareg-webfont.woff') format('woff'),
url('gestareg-webfont.ttf') format('truetype'),
url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}
body {
background: #fff url(../images/body-bg-corporate.gif) repeat-x;
padding-bottom: 10px;
font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}
h1 {
font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}
And your follow-up questions:
Q. I would like to use a font such as "Bumble bee," for example. How can I use #font-face to make that font available on the user's
computer?
Note that I don't know what the name of your Bumble Bee font or file is, so adjust accordingly, and that the font-face declaration should precede (come before) your use of it, as I've shown above.
Q. Can I still use the other #font-face typeface "GestaRegular" as well? Can I use both in the same stylesheet?
Just list them together as I've shown in my example. There is no reason you can't declare both. All that #font-face does is instruct the browser to download and make a font-family available. See: http://iliadraznin.com/2009/07/css3-font-face-multiple-weights
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Thin.otf);
font-weight: 200;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Light.otf);
font-weight: 300;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Regular.otf);
font-weight: normal;
}
#font-face {
font-family: Kaffeesatz;
src: url(YanoneKaffeesatz-Bold.otf);
font-weight: bold;
}
h3, h4, h5, h6 {
font-size:2em;
margin:0;
padding:0;
font-family:Kaffeesatz;
font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }
Multiple variations of a font family can be declared by changing the font-weight and src property of #font-face rule.
/* Regular Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Regular.ttf");
}
/* SemiBold (600) Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-SemiBold.ttf");
font-weight: 600;
}
/* Bold Weight */
#font-face {
font-family: Montserrat;
src: url("../fonts/Montserrat-Bold.ttf");
font-weight: bold;
}
Declared rules can be used by following
/* Regular */
font-family: Montserrat;
/* Semi Bold */
font-family: Montserrat;
font-weght: 600;
/* Bold */
font-family: Montserrat;
font-weight: bold;