css - tipografia - usar mi fuente en wordpress

@ font-face no funciona en el sitio de Wordpress

Question

Estoy usando la función @ font-face para usar una fuente personalizada (Geosanslight) en mi sitio de Wordpress.

He descargado el webkit usando http://www.fontsquirrel.com y lo he subido a la carpeta http://www.lynnepassmore.com/public_html/wp-content/themes/esteem/fonts .

Luego, utilicé la función @ font-face en mi archivo CSS personalizado para llamarlos. Sin embargo, la fuente no está visible en ningún navegador.

Aquí está mi @ font-face css:

@font-face {
font-family: ''geosanslight'';
src: url(''../fonts/geosanslight-webfont.eot'');
src: url(''../fonts/geosanslight-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''../fonts/geosanslight-webfont.woff2'') format(''woff2''),
url(''../fonts/geosanslight-webfont.woff'') format(''woff''),
url(''../fonts/geosanslight-webfont.ttf'') format(''truetype''),
url(''../fonts/geosanslight-webfont.svg'') format(''svg'');
font-weight: normal;
font-style: normal;
}
body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: geosanslight !important;
}

Answer 1

Verifique en la consola de su navegador:

La fuente del origen '' http://www.lynnepassmore.com '' ha sido bloqueada para que no se cargue por la política de Intercambio de recursos de origen cruzado: No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. El origen '' http://lynnepassmore.com '' no está, por lo tanto, permitido.

Está intentando cargar una fuente desde un dominio diferente (www vs sin www): se considera un recurso distante y está bloqueado por la política de encabezados.

Puede usar la ruta relativa para su fuente si la incluye desde su archivo css, entonces será relativa a la ubicación de su archivo css .

Answer 2

Su CSS personalizado está realmente en el índice del código fuente, por lo tanto, la ruta relativa no funcionará. Cambie las rutas de las fuentes de la siguiente manera.

@font-face {
font-family: ''geosanslight'';
src: url(''/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf'') format(''truetype'');
}

y

body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: "geosanslight",sans-serif;
}

por favor, asegúrese de que su css final sea así

@font-face {
font-family: ''geosanslight'';
src: url(''/wp-content/themes/esteem/fonts/geosanslight-webfont.ttf'') format(''truetype'');
}
body, h1, h2, h3, h4, h5, h6, p, li, a {
font-family: ''geosanslight'', sans-serif !important;
}