@ font-face gibt 404s auf Schriftarten zurück

Ich habe versucht, eine benutzerdefinierte Schriftart für meine Website einzurichten, aber es funktioniert nicht in Firefox, Chrome oder Edge/IE. Der Netzwerkabschnitt in den Entwicklerwerkzeugen von Firefox besagt, dass die Schriftarten nicht gefunden wurden und listet 404s auf, obwohl die URLs korrekt sein sollten. Dies ist mein Code:@ font-face gibt 404s auf Schriftarten zurück

 @font-face { 
     font-family: 'Raleway55'; 
     src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') format('truetype'), 
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') format('woff'), 
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') format('woff2'); 
    font-weight: normal; 
    } 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Light.ttf') format('truetype'); 
font-weight: 300; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-LightItalic.ttf') format('truetype'); 
font-weight: 300; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Italic.ttf') format('truetype'); 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBold.ttf') format('truetype'); 
font-weight: 600; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-SemiBoldItalic.ttf') format('truetype'); 
font-weight: 600; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-Bold.ttf') format('truetype'); 
font-weight: 700; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-BoldItalic.ttf') format('truetype'); 
font-weight: 700; 
font-style: italic; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBold.ttf') format('truetype'); 
font-weight: 800; 
} 

@font-face { 
    font-family: 'Raleway55'; 
    src: url('/wp-content/uploads/font-organizer/Raleway-ExtraBoldItalic.ttf') format('truetype'); 
font-weight: 800; 
font-style: italic; 
} 

body { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h1 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h2 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h3 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h4 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h5 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
h6 { font-family: 'Raleway55'!important; font-weight:normal!important; } 
p { font-family: 'Raleway55'!important; font-weight:normal!important; } 
q { font-family: 'Raleway55'!important; font-weight:normal!important; } 
li { font-family: 'Raleway55'!important; font-weight:normal!important; } 
a { font-family: 'Raleway55'!important; font-weight:normal!important; } <code>

Können Sie helfen? Vielen Dank!

Quelle

2017-05-02 nicksss

Versuchen Sie, '/' aus '/ wp-content /' zu entfernen. –

Anstatt alle Elemente font-family zu deklarieren, verwenden Sie einfach '* {font-family: 'Raleway55';}'. Setzen Sie es nicht auf wichtig oder es wird später schwieriger, es zu ändern. –

Eine letzte Sache, wenn das Stylesheet in einem Ordner ist, können Sie '../' vor einer URL verwenden, um den übergeordneten Ordner darzustellen. Sagen wir 'wp-content/stylesheets' und Ihre Fonts sind' wp-content/fonts ', dann würden Sie' ../ fonts/myfont.fontExtension' eingeben. –

Also ich fürchte, deine Wege sind eigentlich falsch. Gerade jetzt zeigt Ihre style.css auf ein wp-content Verzeichnis im Stammverzeichnis Ihres Webservers, von dem ich mir ziemlich sicher bin, dass es dort nicht existiert, wo Ihre Wordpress-Installation existiert.

So vorausgesetzt, Sie Ihre Wordpress-Dateien Setup auf folgende Weise haben (nur die Grundeinstellungen hier, natürlich gibt es viel mehr Dateien):

wp-admin 
wp-content 
    plugins 
    themes 
    my-theme 
     style.css 
    uploads 
    font-organizer 
     my-font.ttf 
wp-includes

Sie würden Ihr CSS wollen so etwas wie folgt aussehen:

@font-face { 
    font-family: 'MyFont'; 
    src: url('../../uploads/font-organizer/my-font.ttf') format('truetype'), 
font-weight: normal; 
}

im Grunde, was Sie tun, wird der Browser zu sagen navigieren zwei Verzeichnisse aus dem Standort der CSS-Datei, die Sie im wp-content Verzeichnis landen sollte, und wechseln Sie dann in uploads/etc. fin d die Schriftart.

Nun ist die Art, wie ich meine Schriftarten normalerweise Setup, wenn ich Wordpress-Websites mache ist nur um sie in einen ordnungsgemäß benannt fonts Ordner im wp-content Ordner zu werfen. Auf diese Weise werden sie aus dem Ordner "uploads" herausgehalten und es ist daher für einen Kunden oder für Sie selbst weniger wahrscheinlich, dass sie versehentlich im Wordpress Media Manager gelöscht werden. Also meine übliche Dateistruktur:

wp-admin 
wp-content 
    fonts 
    my-font.ttf 
    plugins 
    themes 
    my-theme 
     style.css 
    uploads 
wp-includes

Und dann würden meine CSS wie so sein:

@font-face { 
    font-family: 'MyFont'; 
    src: url('../../fonts/my-font.ttf') format('truetype'), 
font-weight: normal; 
}

Wie auch immer, keine Notwendigkeit, es ist meine Art und Weise zu tun, sondern nur einige zu denken. Hoffe das hilft und viel Glück mit der Seite!

Quelle

2017-05-02 02:26:30

Das hat wirklich funktioniert! Danke vielmals! :) Verlor eine Menge Zeit zu denken, was es sein könnte und dann ist es das grundlegende :) Auch tat es mit dem Schriften-Ordner, sieht auf diese Weise viel mehr organisiert. – nicksss

@nicksss Ehrfürchtiger Mann! Froh, dass es geholfen hat! –

@ font-face gibt 404s auf Schriftarten zurück

Antwort

Verwandte Themen