Search Results for 'weston font-face'

[Alix Watson]

Hello!

1.
The most important/pressing issue I am having is installing Weston to use for headers on my site. The font files (see attached image) are in /public_html/wp-content/themes/extinct-child/fonts/ yet all headers EXCEPT the menu are still Arvo.

I have added the following code to theme options/custom CSS AND to the child theme within the editor:
(note: I have tried like WAYYYY too many iterations of this code to try to make it work so it is possible something went wrong at some point during all these iterations).

@font-face {
font-family: ‘weston’;
src: url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts/weston_free-webfont.eot’);
src: url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts//weston_free-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts/weston_free-webfont.woff2’) format(‘woff2’),
url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts/weston_free-webfont.woff’) format(‘woff’),
url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts/weston_free-webfont.ttf’) format(‘truetype’),
url(‘https://greendoggoods.com/wp-content/themes/extinct-child/fonts/weston_free-webfont.svg#weston_freeregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

h1, h2, h3, h4, h5, h6 {
font-family: ‘Weston’ !important;
}

.fancy-heading, .fancy-heading2 { font-family: ‘weston’ !important; font-weight: normal !important; }

h1, h2, h3, h4, h5, h6, #before-content-area h1, #before-content-area h2 , #sitemap-template h2, #archives-template h2, .archive h2, #portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title, #retina-text h3, .widget-title { font-family: ‘Weston’ !important; font-weight: normal !important; letter-spacing: 2px; }

.heading2 .title { font-family: ‘weston’ !important; letter-spacing: 3px !important; }

#content .entry-title, #content .entry-title a, .comment-author cite, .header-fancy { font-family: ‘weston’ !important; }

.contact-info .phone-label, .contact-info .email-label, #author-widget .author-name { font-family: ‘weston’ !important; }

#portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title { font-size: 16px !important; font-family: ‘weston’ !important; }

2. I cannot choose the hex code for colors within Appearance/Theme options/Color. How can I correct this?

Thank you SO SO SO much for your help! I will create and provide a temp login to the site if necessary to help me with these issues.

– Alix

[Raghavendra]

Sandra – you will need to move the font files to your server. At present, the child theme style.css file references the font files on our server –

@font-face {
    font-family: 'Weston';
    src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot');
    src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.woff') format('woff'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.ttf') format('truetype'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.svg#weston_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

In fact, the above font will not render in FireFox due to security restrictions and will raise a warning in browsers like Chrome.

[Raghavendra]

Looks like weston font is not setup on your site as seen by me in the source for your site. Can you pls following thread and see if that helps –

https://www.livemeshthemes.com/support/forums/search/?bbp_search=weston+font-face

[Raghavendra]

If you are pointing to our servers for serving the fonts (our child theme style.css has this code), FireFox will not display the font due to a security measure.

@font-face {
    font-family: 'Weston';
    src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot');
    src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot?#iefix') format('embedded-opentype'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.woff') format('woff'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.ttf') format('truetype'),
    url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.svg#weston_freeregular') format('svg');
    font-weight: normal;
    font-style: normal;

    }

Pls make sure you change the URLs above to point to your own domain after uploading the font files as described below –

https://www.livemeshthemes.com/support/faqs/install-custom-fonts/

Pls let me know if you still see issues. Thanks

[Raghavendra]

This reply has been marked as private.

[Nexus]

You can find the code inside the child theme’s css file (style.css). We have put the code that uses the Weston Font for our demo site there. Here is the code for your reference. Just change the urls accordingly

/* Download Weston font from http://fontfabric.com/weston-free-font/
* and generate web fonts from http://www.fontsquirrel.com/tools/webfont-generator
* and include URL for the generated web font elements here . */
@font-face {
font-family: 'Weston';
src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot');
src: url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.woff') format('woff'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.ttf') format('truetype'),
url('https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.svg#weston_freeregular') format('svg');
font-weight: normal;
font-style: normal;

}

Once you are done with setting up the font you can use it in your custom styling. For example

h1, h2, h3, h4, h5, h6 {
font-family: 'Weston' !important;
}

Hope that helps. Thanks!

[cliftoncreate]

I’m having a similar problem, would it be possible to clarify exactly which part of the Child CSS code (attached) needs to be removed to resolve this issue

Many thanks

/*
Theme Name: Extinct Child
Theme URI: https://www.livemeshthemes.com/extinct
Description: Child theme for the Extinct Theme by LiveMesh
Author: LiveMesh
Author URI: http://themeforest.net/user/livemesh
Template: extinct
Version: 0.1.0
*/

@import url(“../extinct/style.css”);

/* Download Weston font from http://fontfabric.com/weston-free-font/
* and generate web fonts from http://www.fontsquirrel.com/tools/webfont-generator
* and include URL for the generated web font elements here . */
@font-face {
font-family: ‘Weston’;
src: url(‘https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot’);
src: url(‘https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.woff’) format(‘woff’),
url(‘https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.ttf’) format(‘truetype’),
url(‘https://www.livemeshthemes.com/extinct/wp-content/fonts/Weston/weston_free-webfont.svg#weston_freeregular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

.fancy-heading, .fancy-heading2 { font-family: ‘Weston’ !important; font-weight: normal !important; }

h1, h2, h3, h4, h5, h6, #before-content-area h1, #before-content-area h2 , #sitemap-template h2, #archives-template h2,
.archive h2, #portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title,
#retina-text h3, .widget-title { font-family: ‘Weston’ !important; font-weight: normal !important; }

.heading2 .title { letter-spacing: 3px !important; }

#content .entry-title, #content .entry-title a, .comment-author cite, .header-fancy { font-family: ‘Weston’ !important; }

.contact-info .phone-label, .contact-info .email-label, #author-widget .author-name { font-family: ‘Weston’ !important; }

#portfolio-full-width .entry-title, #portfolio-template .entry-title, .post-snippets .hentry .entry-title { font-size: 16px !important; }

[livemesh]

We have included Extinct child theme with the package and in extinct-child\style.css we have set the font-face to Weston. Pls have a look at the file to see how it works.

If you enable the child theme, the font should get enabled automatically although you still expected to download the fonts and upload it to your server as explained in the below post –

https://www.livemeshthemes.com/support/faqs/install-custom-fonts/